效果图
代码实现
!!!注意,防止dataZoom重置,只更新series就能实现:myEcharts.setOption({ series: [.....] });
import { useEffect, useState } from "react";
import * as echarts from "echarts";
const EquipmentNumEcharts = () => {
//-----------------------data
const [echartsData1, setEchartsData1] = useState([
[1665420011355, 35],
[1665421529355, 20],
[1665431639355, 36],
[1665441749355, 10],
[1665451859355, 10],
[1665461969355, 20],
]);
const [echartsData2, setEchartsData2] = useState([
[1665420011355, 20],
[1665421529355, 10],
[1665431639355, 36],
[1665441749355, 20],
[1665451859355, 35],
[1665461969355, 10],
]);
const [echartsData3, setEchartsData3] = useState([
[1665420011355, 20],
[1665421529355, 6],
[1665431639355, 10],
[1665441749355, 10],
[1665451859355, 30],
[1665461969355, 15],
]);
//-----------------------function
let myEcharts;
let option = {
title: { text: "" },
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#4367FF",
},
},
},
grid: {
left: 50,
right: 50,
},
xAxis: {
type: "time",
},
yAxis: {},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
type: "slider",
},
],
series: [
{
name: "MOTT",
type: "line",
data: echartsData1,
},
{
name: "ModBus",
type: "line",
data: echartsData2,
},
{
name: "OPC UA",
type: "line",
data: echartsData3,
},
],
};
const init = () => {
myEcharts = echarts.getInstanceByDom(document.getElementById("equipment-container"));
if (myEcharts == null) {
myEcharts = echarts.init(document.getElementById("equipment-container"));
}
myEcharts.setOption(option, true);
};
const changeEcharts = () => {
myEcharts = echarts.getInstanceByDom(document.getElementById("equipment-container"));
if (myEcharts == null) {
myEcharts = echarts.init(document.getElementById("equipment-container"));
}
//只更新series,防止dataZoom更新时被重置
myEcharts.setOption({
series: [
{
name: "MOTT",
type: "line",
data: echartsData1,
},
{
name: "ModBus",
type: "line",
data: echartsData2,
},
{
name: "OPC UA",
type: "line",
data: echartsData3,
},
],
});
};
//每隔3S重置一下data数据,模拟websocket推送
const time = setInterval(() => {
const timeStamp = new Date().getTime();
setEchartsData1([
[timeStamp, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 1 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 2 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 3 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 4 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 5 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
]);
setEchartsData2([
[timeStamp, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 1 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 2 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 3 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 4 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 5 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
]);
setEchartsData3([
[timeStamp, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 1 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 2 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 3 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 4 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
[timeStamp + 5 * 60 * 60 * 1000, Math.floor(Math.random() * (50 - 1 + 1)) + 1],
]);
}, 3000);
useEffect(() => {
init();
}, []);
//data改变时,执行init()
useEffect(() => {
changeEcharts();
return clearIntervalTime;
}, [echartsData1]);
const clearIntervalTime = () => {
clearInterval(time); //清空定时器
};
//-----------------------html
return (
<div className="equipment-num-echarts" style={{ width: "100%" }}>
<div id="equipment-container" style={{ width: "100%", height: 300 }}></div>
</div>
);
};
export default EquipmentNumEcharts;