react中使用echarts图表

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const MyChart = (props) => {
  const chartRef1 = useRef(null);
 
  let mizhen=Number(String(props.miao)+'000')
  useEffect(() => {
    const chartDom = chartRef1.current;
    if (!chartDom) {
      console.error('Chart container element does not exist.');
      return;
    }
    const myChart = echarts.init(chartDom);
    let option = {
      color: props.name,
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },

      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1989', '1999', '2009', '2019']
      },
      yAxis: {
        type: 'value',

        data: [1, 10, 20, 30, 40, 50]
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [1, 10, 20, 40]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [1, 20, 30, 50]
        },

      ]
    };

    // 更新图表函数
    function updateChart() {
      // 更新数据...
      myChart.setOption(option); // 根据需要更新配置项

      // 清空容器并重绘图表（或者直接使用 setOption 更新数据和配置项）
      myChart.clear();
      myChart.setOption(option);
    }

    // 初始加载图表
    updateChart();

    // 每隔 5 秒刷新一次
    setInterval(function () {
      updateChart();
    }, mizhen);
    myChart.setOption(option);
  }, []);
  return <div id='chart-container' ref={chartRef1} style={{ width: '100%', height: '100%' }} />;
}

export default MyChart;