react项目中使用echart

1.安装插件

npm install --save echarts-for-react

npm install --save echarts

2.我使用的了父子组件引入方法

父组件：index.js

/*** 父组件*/
import React, { Component } from "react";
import Storage from "store2";
import { Notification, Button, DatePicker } from "antd";
import moment from "moment";
import Request from "@utils/request";
import Echart from "@component/echart";const chost = Storage.get("chost");
// 格式化时间
const format = "YYYY-MM-DD HH:mm:ss";
class View extends Component {constructor(props) {super(props);this.state = {startTime: moment({ hour: 0, minute: 0, seconds: 0 }).subtract(30, "days"), // add(1, "day")endTime: moment({ hour: 23, minute: 59, seconds: 59 }),backSource: [], // 数据};}UNSAFE_componentWillMount() {this.loadData(); // 获取当天数据}// 渲染页面数据loadData = () => {const {startTime,endTime,} = this.state;// 获取任务列表Request.GET(`${chost}/clean/clear`, {params: {beginDate: moment(startTime).format(format),endDate: moment(endTime).format(format),}}).then((res) => {if (res.success) {this.setState({backSource: res.data});} else {Notification.error({message: res.msg || "获取信息失败"});}});};disabledStartDate = startValue => {const { endTime } = this.state;if (!startValue || !endTime) {return false;}return startValue.valueOf() > endTime.valueOf();};disabledEndDate = endValue => {const { startTime } = this.state;if (!endValue || !startTime) {return false;}return endValue.valueOf() <= startTime.valueOf();};// 修改开始时间changeStartTime = (time) => {this.setState({startTime: time});};// 修改结束时间changeEndTime = (time) => {this.setState({endTime: time});};render() {const {startTime,endTime,backSource,} = this.state;console.log(backSource);return (<div className="clear"><div className="searchBox"><div className="searchItem"><span>任务开始时间：</span><DatePickerdisabledDate={this.disabledStartDate}showTimeformat="YYYY-MM-DD HH:mm:ss"value={startTime}placeholder="开始"onChange={this.changeStartTime}onOpenChange={this.handleStartOpenChange}/></div><div className="searchItem"><span>任务结束时间：</span><DatePickerdisabledDate={this.disabledEndDate}showTimeformat="YYYY-MM-DD HH:mm:ss"value={endTime}placeholder="结束"onChange={this.changeEndTime}/></div><div className="searchItem"><Buttontype="primary"onClick={() => {this.loadData();}}>查询</Button></div></div><div className="chartBox"><EchartbackData={backSource}xtitle="date"/></div></div>);}
}export default View;

子组件编写echart

import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title"; // 此处是按需引入class echartLine extends Component {constructor(props) {super(props);this.state = {imgType: "line", // 默认折线图xtitle: this.props.xtitle, // x轴类目名称取参};}// getOption 这个函数主要用于配置 option，包括将数据配置进去// 也可以将其放在 state 中，然后通过 setState 更新getOption = () => {// 组装数据，返回配置 optionconst {imgType, xtitle} = this.state;const dataName =  xtitle === "date" ? "时间" : "名称";const currentData = this.props.backData;const clearData = {name: "清分量",type: imgType,barWidth : 10,data: currentData.map(a => a.cleanAmount) || []};const linkData = {name: "关联量",type: imgType,barWidth : 10,data: currentData.map(b => b.linkAmount) || []};return {color: ["#386db3", "#e5323e"], // 图颜色title: {text: ""},tooltip: {trigger: "axis"},legend: {data: ["清分量", "关联量"],top: "20"},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true},toolbox: {feature: {saveAsImage: {},// dataZoom: {yAxisIndex: "none"}, //区域缩放，区域缩放还原//数据视图dataView: {readOnly: false,title: "数据视图",// 自定义数据表格样式optionToContent: function (opt) {var axisData = opt.xAxis[0].data;var series = opt.series;var tdHeads = "<td  style=\"padding:5px 10px\">"+ dataName +"</td>";series.forEach(function (item) {tdHeads += "<td style=\"padding: 5px 10px\">"+item.name+"</td>";});var table = "<table border=\"1\" style=\"margin-left:20px;width:600px;border-collapse:collapse;font-size:14px;text-align:center\"><tbody><tr>"+tdHeads+"</tr>";var tdBodys = "";for (var i = 0, l = axisData.length; i < l; i++) {for (var j = 0; j < series.length; j++) {if(typeof(series[j].data[i]) == "object"){tdBodys += "<td>"+series[j].data[i].value+"</td>";}else{tdBodys += "<td>"+ series[j].data[i]+"</td>";}}table += "<tr><td style=\"padding: 0 10px\">"+axisData[i]+"</td>"+ tdBodys +"</tr>";tdBodys = "";}table += "</tbody></table>";return table;}},magicType: {type: ["line", "bar"]}, //切换为折线图，切换为柱状图restore: {},  //还原}},xAxis: {type: "category",boundaryGap: false,data: currentData.map(item => item[xtitle]) || []},yAxis: {type: "value",name: "清分量"},series: [clearData, linkData]}};render() {return(<ReactEchartsstyle={{ minHeight: "400px" }}option={this.getOption()}notMergelazyUpdatetheme={"theme_name"}// onChartReady={this.onChartReadyCallback}// onEvents={EventsDict}/>)}
}export default echartLine;

效果图如下：

react项目中使用echart相关推荐

React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
优雅的在React项目中使用Redux
概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
如何优雅地在React项目中使用Redux
前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
[react] 在React项目中你用过哪些动画的包？
[react] 在React项目中你用过哪些动画的包? react-transition-group 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...
react前端显示图片_如何在react项目中引用图片？
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...
React项目中请求跨域解决方法
React项目中请求跨域解决方法今天经理给我了一个React项目地址,让我拉下来并跑起来,拉下来运行起来后,发现所有的请求都失败了,并且都是由于跨域问题导致的.花了点时间,解决了这个问题,在这里记录 ...
react项目中遇到的几个问题
react项目中遇到的几个问题前言由于我之前有过react经验,同事之前做react项目时问了我一些问题,其中几个问题虽然常见,但时间长了还是容易忘记,这里简单总结一下问题一: 如何保证定时器( ...

react项目中使用echart

react项目中使用echart相关推荐

最新文章

热门文章