react使用图表 · react

https://blog.csdn.net/yufengaotian/article/details/105492542 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> <DatePicker disabledDate={this.disabledStartDate} showTime format="YYYY-MM-DD HH:mm:ss" value={startTime} placeholder="开始" onChange={this.changeStartTime} onOpenChange={this.handleStartOpenChange} /> </div> <div className="searchItem"> <span>任务结束时间：</span> <DatePicker disabledDate={this.disabledEndDate} showTime format="YYYY-MM-DD HH:mm:ss" value={endTime} placeholder="结束" onChange={this.changeEndTime} /> </div> <div className="searchItem"> <Button type="primary" onClick={() => { this.loadData(); }} > 查询 </Button> </div> </div> <div className="chartBox"> <Echart backData={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 = () => { // 组装数据，返回配置 option const {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( <ReactEcharts style={{ minHeight: "400px" }} option={this.getOption()} notMerge lazyUpdate theme={"theme_name"} // onChartReady={this.onChartReadyCallback} // onEvents={EventsDict} /> ) } } export default echartLine; 效果图如下：