🎉 echarts-for-react v3 发布

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

1、前言

🎉 echarts v5 发布以后，echarts-for-react 上已经有不少不少的 issue 请求支持最新版本，因此，过年期间升级了 v3 版本，支持了最新的 echarts v5。

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

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

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

2、起源

在蚂蚁以前，本身在网易游戏入坑前端，当时内部使用 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。

3、定位

和我本身作开源包皮的习惯和原则有关：

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、搭建产品中，很是很是必须，几乎能够说是必备功能。这一点在目前我负责的 G二、G2Plot 中一样有大量 issue。

6. 按需加载

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

4、升级

给本身立的 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，可是以前的文档结构、样式排版比较凌乱，因此按照如今的我的审美，从新写了写！

5、最后

从以前用 echarts，到如今作 AntV 和大数据产品，本身也算是一直在可视化这个领域了，目前 AntV G2 有不少的规划和内容，须要一些对可视化有兴趣的同窗加入。若是对如下有兴趣，能够联系我投简历（个人 GitHub 主页有微信号）：

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

欢迎你的加入，咱们一块儿来干 AntV G2 的 5.0 版本！