阿超 > echarts-for-react

echarts-for-react

2025-09-16

前端

话可以收回，但人生不可能这样。——席勒

https://github.com/hustcc/echarts-for-react

echarts-for-react：React 下的 Apache ECharts 超简封装体验

在数据可视化的世界里，Apache ECharts 以其强大、灵活和极致的交互性能，在前端圈中久负盛名。但对于 React 开发者来说，如何优雅、便捷地在 React 项目中集成 ECharts，一直是个高频需求。今天就来深度体验一把——echarts-for-react，一个极简的 ECharts React 封装库。

项目简介

echarts-for-react 是由 hustcc 大佬维护的 React 封装组件，让你能在 React 应用中“丝滑”地使用 Apache ECharts。

  • 仓库地址：hustcc/echarts-for-react
  • 官网：https://git.hust.cc/echarts-for-react
  • 主要语言：TypeScript
  • Star 数：4834+
  • Fork 数：655+
  • 关键标签：echarts react visualization
  • 一句话描述：⛳️ Apache ECharts 组件的 React 封装，一个简单的 Apache ECharts 的 React 封装。

为什么选它？

  • 极简封装：API 设计贴合 React 思维，易于集成。
  • 原生支持 ECharts：所有 ECharts 能力几乎无损暴露。
  • TypeScript 支持：类型安全，开发体验极佳。
  • 灵活扩展：支持事件绑定、主题切换、响应式自适应。

快速上手

1. 安装

1
2
3
npm install echarts-for-react echarts
# 或者
yarn add echarts-for-react echarts

2. 基本用法

只需引入组件，传入 ECharts 的 option 配置即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import ReactECharts from 'echarts-for-react';

const option = {
  title: { text: 'ECharts 入门示例' },
  tooltip: {},
  xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

export default () => <ReactECharts option={option} />;

3. 响应式与事件

支持自适应大小、事件绑定等：

1
2
3
4
5
6
7
<ReactECharts
  option={option}
  style={{ height: 400, width: '100%' }}
  onEvents={{
    'click': (params) => { console.log('点击了:', params); }
  }}
/>

4. 使用自定义主题

1
2
3
import 'echarts/theme/dark';

<ReactECharts option={option} theme="dark" />

进阶用法

  • 手动调用 ECharts API：通过 ref 拿到实例，进行二次开发。
  • 动态数据/懒加载：结合 React 的数据流和 hooks，动态渲染大规模数据。
  • 多图联动：支持 ECharts 官方的联动机制。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { useRef } from 'react';
import ReactECharts from 'echarts-for-react';

function ZoomChart() {
  const chartRef = useRef();

  const handleZoom = () => {
    const echartsInstance = chartRef.current.getEchartsInstance();
    echartsInstance.dispatchAction({
      type: 'dataZoom',
      // ...更多参数
    });
  };

  return (
    <>
      <ReactECharts ref={chartRef} option={option} />
      <button onClick={handleZoom}>缩放</button>
    </>
  );
}

适用场景

  • 企业级数据大屏、BI 仪表盘
  • 分析型后台/管理系统
  • 个人博客/作品集的炫酷可视化模块
  • 教学、科研数据展示

社区与生态

  • Star：4834+
  • Fork：655
  • Open Issues：48
  • 维护活跃，文档完善，社区反馈快，适合长期集成和二次开发。

总结

如果你是 React 开发者，又想用上 ECharts 的炫酷图表，echarts-for-react 是最值得信赖的选择。极致简洁的 API，几乎零学习成本的集成方式，让复杂的数据可视化变得轻松愉快。赶快体验一把，让你的 React 项目“会说话”！

仓库地址：https://github.com/hustcc/echarts-for-react
官网：https://git.hust.cc/echarts-for-react