react函数组件echarts销毁前一个实例

您可以在React函数组件中使用`useEffect` hook来销毁前一个Echarts实例。在`useEffect`的依赖项中传入要监听的数据，当这些数据发生变化时，先销毁前一个Echarts实例，再创建新的实例。以下是示例代码：

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

function EchartsComponent(props) {
  const [chartData, setChartData] = useState(props.chartData);
  const chartRef = useRef(null);

  useEffect(() => {
    const chartInstance = echarts.init(chartRef.current);
    chartInstance.setOption(chartData);

    // 返回一个清除函数，用于销毁实例
    return () => {
      chartInstance.dispose();
    };
  }, [chartData]);

  return (
    <div ref={chartRef} style={{ width: '100%', height: 400 }}></div>
  );
}

在上述示例中，我们使用了`useRef` hook来创建一个指向`div`元素的引用。然后，我们使用`useEffect` hook来初始化Echarts实例，并返回一个清除函数，以便在组件卸载时销毁实例。在`useEffect`的依赖项中，我们传入了`chartData`，以便在数据变化时销毁前一个实例并创建新的实例。