关于javascript:????-echartsforreact-v3-发布

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 版本！