echarts 是什么，不用多说了， 国内最知名的可视化图表库之一。echarts-for-react 是它的一个极简的 React 封装。

一、前言

🎉 echarts** v5 发布之后**，echarts-for-react 上已经有很多很多的 issue 请求支持最新版本，所以，过年期间升级了 v3 版本，支持了最新的 echarts v5。

**很尴尬，目前我是在蚂蚁，主要做大数据 BI 产品 + AntV 数据可视化技术栈。理论上来说，echarts 使我们的竞品，哈哈，然而，我居然还在过年给它升级周边，我想这应该就是开源精神吧。**那就顺便一起打个广告吧，欢迎大家支持我现在的工作。

• G2：基于图形语法的数据可视化，提供灵活性、定制性
• G2Plot：基于 G2 做的一图已封装，降低大部分简单场景的使用成本
• Charts：基于 G2Plot，在 Ant Design 上透出的 React 图表组件库

本文还是重点软一下 echarts 和它的 react 封装吧！

二、起源

在蚂蚁之前，自己在网易游戏入坑前端，当时内部使用 SVG 做代码版本控制，所以自己做了一个类似于 travis（但是没有 GitHub Action） 的面向 SVG 的 ci 工具。这个项目是我初次上手 React（0.14.x 版本）。

然而在 JQuery 技术栈下， echarts 很好用，而在 React 下，居然没有一个开箱即用的库，所以每次都要自己在 React 的环境找到 DOM，然后调用 echarts.init，非常 low，且代码重复率很高很高，所以在项目中做了一个 React 封装，然后就开源出来了。

毕业之前，在学校做 Java 的，干过 Java 的知道，Java 的包名很多都会去 4j 后缀，意思是 xx for java。所以因为惯性，给他取名为** echarts-for-react**。

三、定位

和我自己做开源包皮的习惯和原则有关：

1. 封装就要有自己的明确定位，不要过度封装
2. 透传概念，不新增数据结构和技术概念
3. 符合技术栈的习惯（按照 React 的使用性质，按需增加一些开发优化的内容）

所以这个包，主要的内容和特性包括：

1. className + style 属性

React 组件本质还是 ui 组件，我的意识中，每一个 React 组件应该有 className 和 style 属性，为其做样式的自定义。

2. echarts.init 参数作为顶层 props

顶层 API 参数作为顶层 props，概念层级对等，开发者易于理解。这些包含有：

1. notMerge
2. showLoading
3. loadingOption
4. opts.renderer
5. ...

3. echarts option 完全透传

echarts 使用 option 方式来构件图表，结果完善的文档、丰富的官网 DEMO，让开发者开发一个图形非常容易，几乎直接 copy 即可。

所以 echarts-for-react 对于 option 也是完全透传，不做任何修改，甚至都没有默认值的处理，达到的就是官网代码中的 option copy 到这里一样可用。

这大大降低了我自己的维护成本，也降低了开发者同学的调试成本。“react 报错了，先去 echarts 官网试试看，官网上可以，这边一定可以！”

4. 按需决定 update 还是 new？

针对顶层 props，还是 option 变化，包内决定是否新建实例，还是在旧实例上进行更新。让开发者只需要关注在 props，它包里处理好不同 props 要做不同操作。

5. 自动适配容器大小

这个特性可以说是这个 200 行代码的封装库中，最核心的特性，图表自动根据容器的大小做 resize。为了这个功能， 我还特意增加了一个模块 size-sensor（为什么不用开源？之前用的开源各种问题，拖延不解决，所以自己实现一个简单一些的。）

自动适配容器大小，在目前 low-code、搭建产品中，非常非常必须，几乎可以说是必备功能。这一点在目前我负责的 G2、G2Plot 中同样有大量 issue。

6. 按需加载

echarts 包本身还是很大的，混淆后接近 1M。所以按需加载是 echarts 的一个特性，本模块也通过一些代码架构，分拆除 core，让开发者决定如何进行分包和按需引入。

四、升级

给自己立的 Flag，过年期间完成就得完成。

本次升级主要的内容在于：

1. 完全 typescript

之前是在 React 0.14 时代，还是使用 props-types 校验 props，然后 ts 类型定义单独自己手写，也非常痛苦。所以这次直接使用 ts 写，自动生成 类型定义 文件。

当然主要原因，还是因为来蚂蚁之后，基本都写 ts 了，真香。 **

2. 单测覆盖率

之前使用 jest-canvas-mock 进行单元测试，毕竟是 mock 而不是真实运营，所有一些逻辑测试不到，覆盖率一直提不上去。

所以这次换成了 jest-electron，真实运行，覆盖率直接提升到 ，运行也改成使用 GitHub action 了。当然 jest-electron 这个模块，也是为了给 AntV 系列技术栈做单测，而开发的轮子，个人觉得还是挺好用的。

然而，前者的下载量都 2M 每月了，后者才 4K。

3. 全新官网

之前的官网是自己初学 React 的时候，完全自己搭建的，没有 lint、ci，代码凌乱，样式也不好看。所以这次直接使用 dumi 这个库自动生成，网站全部 markdown 开发，也方便大家遇到官网 typo，直接一键提交 PR。

同时 Example 实例也可直接一键导航到其他代码编辑工具上。

然而，之前还可以官网放一些 google adsense，现在 dumi 上，不知道怎么加一个自定义的谷歌广告组件上去，慢慢在弄吧！

4. README 排版

项目很简单，概念也很简单，所以直接 Readme 作为 document，但是之前的文档结构、样式排版比较凌乱，所以按照现在的个人审美，重新写了写！

五、最后

从之前用 echarts，到现在做 AntV 和大数据产品，自己也算是一直在可视化这个领域了，目前 AntV G2 有很多的规划和内容，需要一些对可视化有兴趣的同学加入。如果对以下有兴趣，可以联系我投简历（我的 GitHub 主页有微信号）：

• 大数据、数据分析
• 可视化搭建、Low Code
• 数据可视化技术

欢迎你的加入，我们一起来干 AntV G2 的 5.0 版本！