react hooks echarts

对于React和ECharts的封装，你可以创建一个React组件来包装ECharts图表，并提供一些可配置的属性和事件处理函数。

首先，确保你已经安装了React和ECharts的依赖。然后，你可以创建一个新的React组件来封装ECharts图表。

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

const EchartsWrapper = ({ options, onChartClick }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = echarts.init(chartRef.current);

    // 设置图表的配置项和数据
    chart.setOption(options);

    // 添加点击事件处理函数
    if (onChartClick) {
      chart.on('click', onChartClick);
    }

    // 在组件销毁时销毁图表实例
    return () => {
      chart.dispose();
    };
  }, [options, onChartClick]);

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

export default EchartsWrapper;

在上面的代码中，我们使用了`useRef`钩子来获取图表容器的引用，然后在`