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; 效果圖如下：