react+echarts 柱状图轮播

上代码

gundong.tsx

import React, { useEffect, useRef } from "react";
// import ReactEcharts from "echarts-for-react";
import * as echarts from "echarts"; //(*===所有)，导入所有 并命名为echarts
import { gedanweidaer } from "@/modules/gundong";
export default function gundong() {
  const chartRef: any = useRef();
  useEffect(() => {
    //获取dom节点
    const chart = echarts.init(chartRef.current);
    //获取当前的option
    const chartOption = gedanweidaer(
      ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      [120, 200, 150, 80, 70, 110, 130]
    );
    setInterval(() => {
      let x0 = chartOption.xAxis.data[0];
      let s0 = chartOption.series[0].data[0];
      chartOption.xAxis.data.shift();
      chartOption.xAxis.data.push(x0);
      chartOption.series[0].data.shift();
      chartOption.series[0].data.push(s0);
      chartOption && chart.setOption(chartOption);
    }, 1000);

    // 组件卸载
    // return () => {
    //   chart.dispose();
    // };
  }, []);
  return (
    <div>
      gundong{" "}
      <div style={{ width: "600px", height: "400px" }} ref={chartRef}></div>
    </div>
  );
}

gundong.ts

export const gedanweidaer = (data1: any, data2: any) => ({
  xAxis: {
    type: "category",
    data: data1,
  },
  dataZoom: {
    show: false, //为true滚动条出现
    type: "slider", //type:'inside'，滚动条在最下面，鼠标点击滚动
    startValue: 0, // 从头开始。
    endValue: 3, //end百分比显示范围，endValue具体显示几个数值
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: data2,
      type: "bar",
      barWidth: 40,
    },
  ],
});