react ts 引入echarts 饼图

在使用 React 和 TypeScript 引入 ECharts 饼图时，你需要按照以下步骤进行操作：

1. 首先，确保你已经安装了 ECharts 的相关依赖。你可以使用 npm 或 yarn 来进行安装：

npm install echarts

yarn add echarts

2. 创建一个新的 React 组件，用于显示 ECharts 饼图。例如，你可以创建一个名为 `PieChart` 的组件：

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

interface PieChartProps {
  data: any[]; // 饼图的数据
}

const PieChart: React.FC<PieChartProps> = ({ data }) => {
  const chartRef = useRef<HTMLDivElement>(null);

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

      const option = {
        series: [
          {
            type: 'pie',
            data,
          },
        ],
      };

      chart.setOption(option);
    }
  }, [data]);

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

export default PieChart;

3. 在你的页面或其他组件中使用 `PieChart` 组件，并传入饼图所需的数据。例如：

import React from 'react';
import PieChart from './PieChart';

const App: React.FC = () => {
  const data = [
    { value: 335, name: 'Category 1' },
    { value: 310, name: 'Category 2' },
    { value: 234, name: 'Category 3' },
    { value: 135, name: 'Category 4' },
    { value: 1548, name: 'Category 5' },
  ];

  return (
    <div>
      <h1>ECharts Pie Chart</h1>
      <PieChart data={data} />
    </div>
  );
};

export default App;

这样，你就可以在 React 应用中引入并使用 ECharts 饼图了。记得根据你的实际需求修改数据和样式。