react 中使用 echarts

在React中使用ECharts，通常需要引入`echarts-for-react`库，这是一个将ECharts封装为React组件的库，让ECharts更方便地与React集成。下面是基本的步骤：

1. **安装依赖**:
首先通过npm或yarn安装`echarts-for-react`：

   npm install echarts-for-react @antv/x6 @antv/f2 @antv/g2 @antv/g6 --save

2. **导入并使用**:
使用`<ECharts>`组件来渲染图表，传入配置对象作为props。例如：

   import ECharts from 'echarts-for-react';

   function ChartComponent(props) {
     const chartConfig = {
       // 这里填写ECharts的基本配置，如图表类型、数据、图例等
       // 示例：
       option: {
         title: {
           text: 'ECharts示例'
         },
         tooltip: {},
         xAxis: {},
         yAxis: {},
         series: [{
           name: 'series1',
           type: 'line',
           data: props.data,
         }],
       };
       
     return (
       <ECharts initOptions={chartConfig} />
     )
   }

   export default ChartComponent;

`initOptions`属性用于传递ECharts的初始配置。

3. **提供数据**:
当组件接收新的数据时，可以调用`setState`来更新`option`，ECharts会自动重新渲染：

   // 更新数据时
   this.setState(prevState => ({
     data: newData,
   }));

4. **自定义事件处理**:
如果需要处理ECharts的交互事件，可以在`<ECharts>`上使用`on` prop来注册事件监听器。