553 字
3 分钟
数据可视化选型对比
前言
由于业务需求，先针对D3、G2、Echarts三个数据可视化解决方案通过如下维度对比
- GitHub star 数、npm 下载量
- demo 对比
- 性能
npm 下载量总结
npm 下载量
从上图发现，d3 的不论是下载量还是 star 数，亦或者是近期更新时间都是直接碾压其他两个；其次就是 Echarts；最后就是 G2
Demo 演示
Echarts
Echarts 上手简单，挂载 dom 后，写好配置信息对象(即 setOption 的参数，如果图表复杂，setOption 的参数对象就会越来越长，维护的时候，需要改某个配置项，可能寻找 key 的时间较麻烦，不过好在官网的配置文档的结构还是挺好的，还是挺不错的，如下：
G2
学习成本会比 Echarts 要略高，设计理念更加具有学术性；但是语义化更加清晰，提供了一套图形语法，显得更加灵活，能够很轻松地随意组合和切换不同类型的图表切换，同时也更易复用代码，更易封装。
D3
学习成本极高，更接近底层，因为它能直接操作 svg，自由度也就因此极大，只要是 2d 图表，几乎都可以做到，但上诉两种则不一定，也就意味着，作品的质量不局限于技术，而更多的是靠想象力！
性能对比
测试方法：简单粗暴，根据不同数量级，利用 Chorme 的 performance 去测试，以下是测试结果，每种均取 10 次的平均值，单位为 ms
| 数据量 | Echarts | G2 | D3 |
|---|---|---|---|
| 1k | 221.29 | 230.56 | 71.53 |
| 10k | 366.69 | 314.67 | 136.17 |
| 100k | 989.33 | 849.68 | 343.23 |
| 1M | 2979.70 | 2052.72 | 1140.87 |
总结
| 选型 | 社区 | 学习成本 | 性能 |
|---|---|---|---|
| Echarts | 社区丰富，资源多，api 文档完善 | 易上手，定制自定义图标组件稍麻烦 | 一般 |
| G2 | 由蚂蚁团队维护，GitHub 社区也有人互动，文档也较详细 | 微高，但更具有语义化，灵活度更高，可定制化一般的图表组件 | 较好 |
| D3 | 历史悠久，GitHub 中 issue 也挺多，但文档查阅较麻烦 | 极高，但灵活度也极高，理论上可随意定制化任何包括但不限于图表组件，还能做更多的 2d 图形 | 好 |