import React, { Component } from "react";
import * as echarts from "echarts";
export default class App extends Component {
state = {
data: []
};
componentDidMount() {
this.getEchartData();
}
componentWillUnmount() {
// 组件卸载前卸载图表
this.dispose();
}
getEchartData = ()=> {
const dateToStr = (time) => {
let datetime = new Date(time)
let month = datetime.getMonth()+1;//js从0开始取
let date = datetime.getDate();
let hour = datetime.getHours();
let m = datetime.getMinutes();
let s = datetime.getSeconds();
month = month < 10 ? "0" + month : month ;
date = date<10 ? "0" + date : date;
hour = hour <10 ? "0" + hour : hour;
m = m <10 ? "0" + m : m;
s = s <10 ? "0" + s : s;
return date + '-' + month + ' '+ hour + ':' + m + ':' + s;
}
this.myChart = echarts.init(this.el);
this.myChart.setOption({
title: {
text: "B4(TBM103)的生胎数量",
left: "center",
subtext: "2021-04-12 00:00:00 —— 2021-04-14 00:00:00"
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
},
grid: {
top: 100
},
xAxis: [
{
type: "category",
data: [
"04-12 07:29",
"04-12 15:29",
"04-12 23:29",
"04-13 07:29",
"04-13 15:29",
"04-13 23:29",
"04-14 07:29"
]
},
{
axisLabel: {
formatter: function (val,xAxisIndex) {
return dateToStr(new Date().getTime() + xAxisIndex*2*60*60*1000);
}
},
}
],
yAxis: [
{
type: "value",
scale: true,
name: "产量",
max: 150,
min: 0,
boundaryGap: [0.2, 0.2],
nameGap: 30,
},
{
type: "value",
scale: true,
name: "循环时间",
max: 200,
min: 0,
boundaryGap: [0.2, 0.2],
nameGap: 30,
}
],
series: [
{
name: "产量",
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
data: [115,137,145,130,123,145,7],
itemStyle: {
color: '#4D97D5'
},
},
{
name: "循环时间",
type: "scatter",
xAxisIndex: 1,
yAxisIndex: 1,
data: (function () {
var res = [];
var len = 300;
while (len--) {
res.push([Math.random()*3,(80 + Math.random() * 30 + (Math.random() < 0.2 ? (Math.random() > 0.5 ? Math.random() * 50 : Math.random() * -50 ) : 0)).toFixed(2)]);
}
return res;
})(),
itemStyle: {
color: 'red'
},
},
]
});
window.onresize = () => {
this.myChart.resize();
};
};
dispose = () => {
if (!this.myChart) {
return;
}
this.myChart.dispose();
this.myChart = null;
};
render() {
return (
<div style={{ width: "100%", height: "100%" }} ref={el => (this.el = el)} />
);
}
}
图示: