当前位置：首页 > React

react中如何封装echats

2026-01-24 09:56:42React

封装 ECharts 组件的方法

在 React 中封装 ECharts 组件可以通过以下步骤实现，确保图表的可复用性和动态更新能力。

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

npm install echarts react

基础封装示例

创建一个基础的 ECharts 封装组件，支持初始化图表和响应式调整。

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

const ReactECharts = ({ option }) => {
  const chartRef = useRef(null);

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

    const handleResize = () => chart.resize();
    window.addEventListener('resize', handleResize);

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

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

export default ReactECharts;

动态数据更新

通过监听 option 的变化，实现图表数据的动态更新：

react中如何封装echats

useEffect(() => {
  if (chartRef.current) {
    const chart = echarts.getInstanceByDom(chartRef.current);
    if (!chart) {
      echarts.init(chartRef.current).setOption(option);
    } else {
      chart.setOption(option);
    }
  }
}, [option]);

自定义主题和扩展

支持自定义主题或扩展 ECharts 功能：

import { darkTheme } from './customTheme';

useEffect(() => {
  echarts.registerTheme('dark', darkTheme);
  const chart = echarts.init(chartRef.current, 'dark');
  chart.setOption(option);
}, []);

事件绑定

封装图表事件（如点击、鼠标悬停等）以增强交互性：

react中如何封装echats

useEffect(() => {
  const chart = echarts.init(chartRef.current);
  chart.on('click', (params) => {
    console.log('Chart clicked:', params);
  });
}, []);

按需引入模块

优化性能，按需引入 ECharts 模块：

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';

echarts.use([BarChart, GridComponent]);

完整封装示例

结合上述功能，实现一个完整的封装组件：

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';

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

const ReactECharts = ({ option, theme, onEvents }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = echarts.init(chartRef.current, theme);
    chart.setOption(option);

    if (onEvents) {
      Object.keys(onEvents).forEach((event) => {
        chart.on(event, onEvents[event]);
      });
    }

    const handleResize = () => chart.resize();
    window.addEventListener('resize', handleResize);

    return () => {
      chart.dispose();
      window.removeEventListener('resize', handleResize);
    };
  }, [option, theme, onEvents]);

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

export default ReactECharts;

使用示例

在父组件中调用封装好的 ECharts 组件：

import ReactECharts from './ReactECharts';

const App = () => {
  const option = {
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: { type: 'value' },
    series: [{ data: [10, 20, 30], type: 'bar' }]
  };

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