ECharts for React 使用指南：在React中轻松集成ECharts图表

荣杏姣Samantha

于 2025-06-08 09:21:53 发布

阅读量368

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00530/article/details/148508973

ECharts for React 使用指南：在React中轻松集成ECharts图表

echarts-for-react ⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。项目地址: https://gitcode.com/gh_mirrors/ec/echarts-for-react

项目概述

ECharts for React 是一个专为React应用设计的ECharts封装组件，它让开发者能够以React组件化的方式轻松使用ECharts这一强大的数据可视化库。通过这个封装，开发者可以避免直接操作DOM的繁琐过程，享受React声明式编程的便利。

核心优势

React友好：完全遵循React的设计哲学，以组件形式提供图表功能
性能优化：内置智能渲染机制，避免不必要的重绘
类型安全：提供完整的TypeScript类型定义
配置灵活：支持动态更新图表配置和主题
事件绑定：简化了ECharts事件与React组件的集成

安装指南

使用npm或yarn进行安装：

npm install echarts-for-react
# 或
yarn add echarts-for-react

注意：项目本身已经包含了ECharts作为peerDependency，因此无需单独安装ECharts。

基础使用示例

下面是一个简单的折线图实现示例：

import React from 'react';
import ReactECharts from 'echarts-for-react';

const LineChartExample = () => {
  const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36 },
    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',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };

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

export default LineChartExample;

核心API详解

主要属性

option (Object): ECharts图表配置对象，必填
theme (String|Object): 应用的主题名称或主题配置对象
opts (Object): 额外的ECharts初始化参数
loading (Boolean): 是否显示加载动画
style (Object): 容器样式
className (String): 容器类名
onEvents (Object): 事件处理函数集合

常用方法

getEchartsInstance(): 获取底层的ECharts实例
forceUpdate(): 强制重新渲染图表

高级特性

动态更新图表

当组件的option属性发生变化时，图表会自动更新：

const DynamicChart = ({ data }) => {
  const options = {
    // 使用props中的数据动态生成配置
    series: [{ data }]
  };
  
  return <ReactECharts option={options} />;
}

事件处理

可以通过onEvents属性绑定ECharts事件：

<ReactECharts
  option={options}
  onEvents={{
    click: (params) => console.log('图表被点击', params),
    legendselectchanged: (params) => console.log('图例选择变化', params)
  }}
/>

主题定制

支持使用预定义主题或自定义主题：

// 使用内置主题
<ReactECharts option={options} theme="dark" />

// 使用自定义主题
const customTheme = {
  color: ['#c12e34', '#e6b600', '#0098d9']
};
<ReactECharts option={options} theme={customTheme} />