当前位置：首页 > React

react中如何封装echats

2026-03-10 18:11:46React

封装 ECharts 组件的方法

在 React 中封装 ECharts 组件需要结合 ECharts 的初始化、配置和销毁逻辑。以下是具体实现步骤：

安装依赖 确保项目中已安装 ECharts 和 React 相关依赖：

npm install echarts react

基础封装 创建一个可复用的 ECharts 组件，处理图表初始化、更新和销毁：

react中如何封装echats

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

const ReactECharts = ({ option, style = { width: '100%', height: '400px' } }) => {
  const chartRef = useRef(null);
  let chartInstance = null;

  useEffect(() => {
    if (chartRef.current) {
      chartInstance = echarts.init(chartRef.current);
      chartInstance.setOption(option);
    }

    const handleResize = () => {
      chartInstance?.resize();
    };
    window.addEventListener('resize', handleResize);

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

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

export default ReactECharts;

使用示例 在父组件中传入配置选项即可使用：

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

const App = () => {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]
  };

  return <ReactECharts option={option} />;
};

高级功能扩展

主题定制 支持传入 ECharts 主题：

react中如何封装echats

const ReactECharts = ({ option, theme }) => {
  useEffect(() => {
    chartInstance = echarts.init(chartRef.current, theme);
    // ...
  }, [theme]);
};

事件绑定 添加事件处理支持：

const ReactECharts = ({ option, onEvents }) => {
  useEffect(() => {
    Object.entries(onEvents || {}).forEach(([eventName, handler]) => {
      chartInstance.on(eventName, handler);
    });
  }, [onEvents]);
};

按需加载 减小包体积，只导入需要的图表类型：

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([LineChart, GridComponent, CanvasRenderer]);