React+TypeScript封装ECharts

在React和TypeScript中，结合ECharts创建图表组件通常涉及以下几个步骤：

1. 安装依赖：首先需要安装`echarts`库及其 TypeScript 配套的声明文件，例如 `@types/echarts`。可以使用npm或yarn来安装：

npm install echarts @types/echarts
# 或者
yarn add echarts @types/echarts

2. 导入并配置ECharts：在React组件中导入ECharts实例，并配置基本选项，如图例、数据等：

import ECharts from 'echarts';

const defaultOptions: ECharts.Options = {
  // ... ECharts 的默认配置项
};

3. 创建自定义组件：创建一个名为`EChartComponent`的React组件，接受图表配置作为props，并使用ECharts初始化图表：

interface EChartProps {
  options: ECharts.Options;
}

class EChartComponent extends React.Component<EChartProps> {
  private chartRef: React.RefObject<ECharts.ECharts>;

  componentDidMount() {
    const { options } = this.props;
    if (this.chartRef.current) {
      this.chartRef.current.setOption(options);
    }
  }

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

4. 使用EChartComponent：在其他React组件中，你可以像使用普通的React组件一样使用这个EChartComponent，并传递所需的数据和配置到其中：

function App() {
  const customOptions = { ...defaultOptions, series: ... }; // 自定义系列配置

  return (
    <EChartComponent options={customOptions} />
  );
}