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;
效果图如下: