V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
50vip
V2EX  ›  分享创造

🎉 echarts-for-react v3 发布,支持 echarts v5

  •  1
     
  •   50vip · 2021-02-19 09:33:00 +08:00 · 2883 次点击
    这是一个创建于 1355 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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,让开发者决定如何进行分包和按需引入。

    四、升级

    image.png

    给自己立的 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 。

    image.png

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

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

    4. README 排版

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

    五、最后

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

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

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

    6 条回复    2021-02-24 13:21:51 +08:00
    yanulg
        1
    yanulg  
       2021-02-19 10:29:09 +08:00
    🐜加班什么强度啊? antv 是不是只有杭州有?
    xiaoluoboding
        2
    xiaoluoboding  
       2021-02-19 11:28:36 +08:00
    优秀
    50vip
        3
    50vip  
    OP
       2021-02-19 11:31:23 +08:00
    @yanulg 差不多只有杭州有,上还有一部分的。
    50vip
        4
    50vip  
    OP
       2021-02-19 11:33:53 +08:00
    @yanulg 加班我说说我自己吧,每天 10 点上班,通常 9 点~ 9 点半打车,下雨难打车会晚一些。一周可能会有一天修 bug 会比较晚到 10 点半吧。然后每周周五至少 6 点下班,周一到周四有一天会 6 点下班。

    我自己时间相对灵活些,普遍的情况就是:早上 10 点,晚上 9 ~ 10 点。5 天,上次周末加班还是 19 年 5 月 1 号,三倍工资。
    rocwang
        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 有什么异同?
    50vip
        6
    50vip  
    OP
       2021-02-24 13:21:51 +08:00
    bizcharts 之前是做 g2 的 react 创意封装,现在也基于 g2plot 封装,确实和 charts 有些冲突了。不过 bizcharts 是其他团队在搞,所以也没法干预~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1432 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:48 · PVG 07:48 · LAX 15:48 · JFK 18:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.