echars设置刷新频率 刷新后更改数据

import React, { useEffect, useRef } from 'react';
import ReactEcharts from 'echarts-for-react';

const BarChart = () => {
  const chartRef = useRef(null);
  let timer;

  useEffect(() => {
    // 设置定时器，每隔2秒刷新图表数据
    timer = setInterval(() => {
      updateChartData();
    }, 2000);

    return () => {
      // 组件卸载时清除定时器
      clearInterval(timer);
    };
  }, []);

  const updateChartData = () => {
    // 更新图表数据
    const chartInstance = chartRef.current.getEchartsInstance();
    const option = chartInstance.getOption();
    option.series[0].data = [10, 20, 30, 40, 50]; // 更新数据，这里假设获取了新的数据
    chartInstance.setOption(option); // 更新图表
  };

  const option = {
    // 图表的配置项
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [10, 20, 30, 40, 50],
      type: 'bar'
    }]
  };

  return (
    <ReactEcharts
      ref={chartRef}
      option={option}
      style={{ height: '300px' }} // 设置图表的高度
    />
  );
};

export default BarChart;