快捷導(dǎo)航

React19通用ECharts組件的使用示例

更新時(shí)間：2026年02月04日 09:01:14 作者：zwjapple

本文主要介紹了React19通用ECharts組件的使用示例,支持餅圖、折線圖和柱狀圖,并且可以自動(dòng)銷(xiāo)毀實(shí)例以避免重復(fù)渲染問(wèn)題,同時(shí)能夠自動(dòng)響應(yīng)窗口大小變化,下面就來(lái)詳細(xì)的介紹一下

1.src/services/echarts.ts

注冊(cè)所有需要的圖表類(lèi)型和組件（不用再分開(kāi)寫(xiě)折線/餅圖/柱狀圖）

// 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';

// 按需注冊(cè)組件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
  LineChart,
  PieChart,
  BarChart,
  CanvasRenderer
]);

export default echarts;

2.src/components/EChartsBase.tsx

一個(gè)通用的 React 19 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) {
      // 如果已有實(shí)例，先銷(xiāo)毀，防止 React 19 重復(fù)渲染
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
      chartInstance.current = echarts.init(chartRef.current);
      chartInstance.current.setOption(option);
    }

    // 監(jiān)聽(tīng)窗口大小變化
    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;

3. 使用示例（不傳colors也能顯示）

// 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: '訪問(wèn)來(lái)源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '搜索引擎' },
          { value: 735, name: '直接訪問(wèn)' },
          { value: 580, name: '郵件營(yíng)銷(xiāo)' }
        ]
      }
    ]
  };

  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: ['蘋(píng)果', '香蕉', '橘子', '梨子'] },
    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>
  );
}

? 特點(diǎn)：