react封装echarts公共组件

React封装echarts公共组件的步骤如下：

1. 安装echarts

使用npm安装echarts：

npm install echarts --save

2. 创建ECharts组件

创建一个ECharts组件，该组件将呈现echarts图表。该组件将接受以下属性：

- option： echarts图表的配置选项。
- style： echarts图表的样式。

import React, { Component } from 'react';
import echarts from 'echarts';

class ECharts extends Component {
  componentDidMount() {
    this.renderEChart();
  }

  componentDidUpdate() {
    this.renderEChart();
  }

  renderEChart() {
    const { option, style } = this.props;
    const echartObj = echarts.init(this.chartRef);
    echartObj.setOption(option);
    echartObj.resize();
  }

  render() {
    const { style } = this.props;
    return <div ref={ref => (this.chartRef = ref)} style={style} />;
  }
}

export default ECharts;

3. 将ECharts组件添加到应用程序中

在您的应用程序中使用ECharts组件。将图表的选项和样式作为属性传递给该组件。

import React, { Component } from 'react';
import ECharts from './ECharts';

class App extends Component {
  render() {
    const option = {
      // echarts图表的配置选项
    };

    const style = {
      // echarts图表的样式
    };

    return <ECharts option={option} style={style} />;
  }
}

export default App;

这就是React封装echarts公共组件的基本步骤。您可以根据需要自定义ECharts组件，并在应用程序中使用它。