当前位置：首页 > React

react中如何封装echats

2026-03-31 17:37:28React

封装 ECharts 组件

在 React 中封装 ECharts 组件需要结合 ECharts 的初始化、配置和销毁逻辑。以下是一个完整的封装方案：

安装依赖：

npm install echarts react-resize-detector

基础封装实现

创建可复用的 ReactECharts 组件：

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import ResizeObserver from 'react-resize-detector';

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

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

    return () => {
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
    };
  }, []);

  useEffect(() => {
    if (chartInstance.current && option) {
      chartInstance.current.setOption(option);
    }
  }, [option]);

  const onResize = () => {
    if (chartInstance.current) {
      chartInstance.current.resize();
    }
  };

  return (
    <ResizeObserver onResize={onResize}>
      <div ref={chartRef} style={style} />
    </ResizeObserver>
  );
};

export default ReactECharts;

使用示例

在父组件中使用封装好的图表组件：

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

const App = () => {
  const option = {
    title: {
      text: '示例图表'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10]
    }]
  };

  return (
    <div style={{ width: '600px', height: '400px' }}>
      <ReactECharts option={option} />
    </div>
  );
};

高级封装特性

添加主题支持和自定义事件：

const ReactECharts = ({ 
  option, 
  theme, 
  onEvents,
  style = { height: '100%' } 
}) => {
  // ...其他逻辑同上...

  useEffect(() => {
    if (chartRef.current) {
      chartInstance.current = echarts.init(
        chartRef.current, 
        theme || 'default'
      );
    }
    // 绑定事件
    if (onEvents) {
      Object.entries(onEvents).forEach(([eventName, handler]) => {
        chartInstance.current.on(eventName, handler);
      });
    }

    return () => {
      // 解绑事件
      if (onEvents && chartInstance.current) {
        Object.keys(onEvents).forEach(eventName => {
          chartInstance.current.off(eventName);
        });
      }
      // ...销毁逻辑...
    };
  }, [theme]);

  // ...其他逻辑...
};

按需引入优化

减少打包体积的按需引入方式：

import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer
]);

性能优化建议

添加防抖的 resize 处理：

import { debounce } from 'lodash-es';

const onResize = debounce(() => {
  if (chartInstance.current) {
    chartInstance.current.resize();
  }
}, 300);

处理大数据量的懒加载：

react中如何封装echats

const ReactECharts = ({ 
  option,
  lazyUpdate = false,
  // ...其他props...
}) => {
  useEffect(() => {
    if (chartInstance.current && option) {
      chartInstance.current.setOption(option, {
        lazyUpdate: lazyUpdate,
        notMerge: true
      });
    }
  }, [option, lazyUpdate]);
  // ...其他逻辑...
};