React19通用ECharts组件的使用示例

// src/services/echarts.ts
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent
} from 'echarts/components';
import { LineChart, PieChart, BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

// 按需注册组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
  LineChart,
  PieChart,
  BarChart,
  CanvasRenderer
]);

export default echarts;

// src/components/EChartsBase.tsx
import React, { useRef, useEffect } from 'react';
import echarts from '@/services/echarts';

interface EChartsBaseProps {
  option: echarts.EChartsOption;
  width?: string;
  height?: string;
}

const EChartsBase: React.FC<EChartsBaseProps> = ({
  option,
  width = '100%',
  height = '400px'
}) => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  const chartInstance = useRef<echarts.EChartsType | null>(null);

  useEffect(() => {
    if (chartRef.current) {
      // 如果已有实例，先销毁，防止 React 19 重复渲染
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
      chartInstance.current = echarts.init(chartRef.current);
      chartInstance.current.setOption(option);
    }

    // 监听窗口大小变化
    const handleResize = () => {
      chartInstance.current?.resize();
    };
    window.addEventListener('resize', handleResize);

    return () => {
      chartInstance.current?.dispose();
      window.removeEventListener('resize', handleResize);
    };
  }, [option]);

  return <div ref={chartRef} style={{ width, height }} />;
};

export default EChartsBase;

// src/pages/DemoCharts.tsx
import React from 'react';
import EChartsBase from '@/components/EChartsBase';

export default function DemoCharts() {
  const pieOption = {
    title: { text: '示例饼图', left: 'center' },
    tooltip: { trigger: 'item' },
    legend: { bottom: 0 },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '搜索引擎' },
          { value: 735, name: '直接访问' },
          { value: 580, name: '邮件营销' }
        ]
      }
    ]
  };

  const lineOption = {
    title: { text: '示例折线图' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    yAxis: { type: 'value' },
    series: [
      { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', smooth: true }
    ]
  };

  const barOption = {
    title: { text: '示例柱状图' },
    tooltip: {},
    xAxis: { type: 'category', data: ['苹果', '香蕉', '橘子', '梨子'] },
    yAxis: { type: 'value' },
    series: [
      { data: [5, 20, 36, 10], type: 'bar' }
    ]
  };

  return (
    <div style={{ padding: 20 }}>
      <EChartsBase option={pieOption} height="300px" />
      <EChartsBase option={lineOption} height="300px" />
      <EChartsBase option={barOption} height="300px" />
    </div>
  );
}