echarts 是什么,不用多说了, 国内最知名的可视化图表库之一。echarts-for-react 是它的一个极简的 React 封装。
🎉 echarts** v5 发布之后**,echarts-for-react 上已经有很多很多的 issue 请求支持最新版本,所以,过年期间升级了 v3 版本,支持了最新的 echarts v5 。
很尴尬,目前我是在蚂蚁,主要做大数据 BI 产品 + AntV 数据可视化技术栈。理论上来说,echarts 使我们的竞品,哈哈,然而,我居然还在过年给它升级周边,我想这应该就是开源精神吧。那就顺便一起打个广告吧,欢迎大家支持我现在的工作。
本文还是重点软一下 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**。
和我自己做开源包皮的习惯和原则有关:
所以这个包,主要的内容和特性包括:
React 组件本质还是 ui 组件,我的意识中,每一个 React 组件应该有 className 和 style 属性,为其做样式的自定义。
顶层 API 参数作为顶层 props,概念层级对等,开发者易于理解。这些包含有:
echarts 使用 option 方式来构件图表,结果完善的文档、丰富的官网 DEMO,让开发者开发一个图形非常容易,几乎直接 copy 即可。
所以 echarts-for-react 对于 option 也是完全透传,不做任何修改,甚至都没有默认值的处理,达到的就是官网代码中的 option copy 到这里一样可用。
这大大降低了我自己的维护成本,也降低了开发者同学的调试成本。“react 报错了,先去 echarts 官网试试看,官网上可以,这边一定可以!”
针对顶层 props,还是 option 变化,包内决定是否新建实例,还是在旧实例上进行更新。让开发者只需要关注在 props,它包里处理好不同 props 要做不同操作。
这个特性可以说是这个 200 行代码的封装库中,最核心的特性,图表自动根据容器的大小做 resize 。为了这个功能, 我还特意增加了一个模块 size-sensor(为什么不用开源?之前用的开源各种问题,拖延不解决,所以自己实现一个简单一些的。)
自动适配容器大小,在目前 low-code 、搭建产品中,非常非常必须,几乎可以说是必备功能。这一点在目前我负责的 G2 、G2Plot 中同样有大量 issue 。
echarts 包本身还是很大的,混淆后接近 1M 。所以按需加载是 echarts 的一个特性,本模块也通过一些代码架构,分拆除 core,让开发者决定如何进行分包和按需引入。
给自己立的 Flag,过年期间完成就得完成。
本次升级主要的内容在于:
之前是在 React 0.14 时代,还是使用 props-types 校验 props,然后 ts 类型定义单独自己手写,也非常痛苦。所以这次直接使用 ts 写,自动生成 类型定义 文件。
当然主要原因,还是因为来蚂蚁之后,基本都写 ts 了,真香。 **
之前使用 jest-canvas-mock 进行单元测试,毕竟是 mock 而不是真实运营,所有一些逻辑测试不到,覆盖率一直提不上去。
所以这次换成了 jest-electron,真实运行,覆盖率直接提升到 ,运行也改成使用 GitHub action 了。当然 jest-electron 这个模块,也是为了给 AntV 系列技术栈做单测,而开发的轮子,个人觉得还是挺好用的。
然而,前者的下载量都 2M 每月了,后者才 4K 。
之前的官网是自己初学 React 的时候,完全自己搭建的,没有 lint 、ci,代码凌乱,样式也不好看。所以这次直接使用 dumi 这个库自动生成,网站全部 markdown 开发,也方便大家遇到官网 typo,直接一键提交 PR 。
同时 Example 实例也可直接一键导航到其他代码编辑工具上。
然而,之前还可以官网放一些 google adsense,现在 dumi 上,不知道怎么加一个自定义的谷歌广告组件上去,慢慢在弄吧!
项目很简单,概念也很简单,所以直接 Readme 作为 document,但是之前的文档结构、样式排版比较凌乱,所以按照现在的个人审美,重新写了写!
从之前用 echarts,到现在做 AntV 和大数据产品,自己也算是一直在可视化这个领域了,目前 AntV G2 有很多的规划和内容,需要一些对可视化有兴趣的同学加入。如果对以下有兴趣,可以联系我投简历(我的 GitHub 主页有微信号):
欢迎你的加入,我们一起来干 AntV G2 的 5.0 版本!
1
yanulg 2021-02-19 10:29:09 +08:00
🐜加班什么强度啊? antv 是不是只有杭州有?
|
2
xiaoluoboding 2021-02-19 11:28:36 +08:00
优秀
|
4
50vip OP @yanulg 加班我说说我自己吧,每天 10 点上班,通常 9 点~ 9 点半打车,下雨难打车会晚一些。一周可能会有一天修 bug 会比较晚到 10 点半吧。然后每周周五至少 6 点下班,周一到周四有一天会 6 点下班。
我自己时间相对灵活些,普遍的情况就是:早上 10 点,晚上 9 ~ 10 点。5 天,上次周末加班还是 19 年 5 月 1 号,三倍工资。 |
5
rocwang 2021-02-21 06:34:16 +08:00 via iPhone
十分感谢题主的项目!我有在用 echarts-for-react,确实蛮好用的。
我在选这种图表库的时候发现除了 echarts,G2Plot 和 ant-design-charts,还有一个 BizCharts ( https://github.com/alibaba/BizCharts) ,也是出自阿里,且也是基于 G2Plot 为 React 的封装。不知道它和 ant-design-charts 有什么异同? |
6
50vip OP bizcharts 之前是做 g2 的 react 创意封装,现在也基于 g2plot 封装,确实和 charts 有些冲突了。不过 bizcharts 是其他团队在搞,所以也没法干预~
|