【react】使用echarts图表---并解决更新数据时dataZoom重置的问题

效果图

代码实现

！！！注意，防止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;