目前常用于前端网页数据可视化实现的图表插件主要有四款:Echarts、Highcharts、G2、D3,开发一些产品工具的时候可能会集成这些开源的可视化插件(这里Highcharts不开源)
1、Echarts:https://echarts.baidu.com/
ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如凤巢、广告管家等等)的报表需求。
ECharts3.8版本以上(包括3.8)可以支持SVG和Canvas绘图,3.8版本以下只能支持Canvas,且两种方式都只能导出jpg,png格式的图片,目前还无法导出svg格式图片,上手最简单,定制化程度较低。
2、Highcharts:Highcharts 演示 | Highcharts
国外公司开发的图表库,主要采用svg画图。(非商业免费)
Highcharts和Echarts是一类东西,打个比方说:Echarts相当于中国的WPS,而Highcharts相当于微软office;但跟D3维度不同。假如前面两个能解决你的需求,那么就可以先不考虑D3。英语好Highcharts,英语不好选Echarts
3、G2(antV):G2 基础图表类库 - AntV
G2(The Grammar Of Graphics) 是一个由纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由得定制图表,是为大数据时代而准备的强大的可视化工具。
G2可以支持Canvas和SVG绘图,还未提供导出图片的接口,需要自行实现导出图片,定制化程度和上手速度处于D3和Echarts之间。
4、D3:D3.js - Data-Driven Documents
该库更接近底层,与 g2、echarts 不同,d3 能直接操作 svg,所以拥有极大的自由度,几乎可以实现任何 2d 的设计需求。正如其名 Data Driven Documents,其本质是将数据与 DOM 绑定,并将数据映射至 DOM 属性上(这时视觉通道、比例尺转换等理论就可发挥作用喽~)
D3目前支持SVG和Canvas绘图,而且可以导出png、jpg、svg格式的图片,且定制化程度是三者中最高的,但上手较难。
# | Echarts | Highcharts | G2 | D3 |
---|---|---|---|---|
出品方 | 百度 | Highsoft公司 | 阿里 | 美国计算机科学家和数据可视化专家 |
难易程度 | 基于Canvas,适用于数据量比较大的情况 | 基于SVG,方便自己定制,但图表类型有限 | 学习门槛较高,对用户的 web 技术、可视化理论、数学逻辑都一定要求; 掌握 d3 后,限制作品水平的只会是想象力而不再是技术 | 基于SVG,方便自己定制;D3.v4支持Canvas+SVG,如果计算比较密集,也可以选择用Canvas。除此之外,D3图表类型非常丰富,几乎可以满足所有开发需求,但代码相对于其他插件来说,会稍微难一点 |
免费/开源 | 完全免费,代码开源 | 非商业免费,商业需授权,代码开源 | 完全免费,代码开源 | 完全免费,代码开源 |
兼容性 | 兼容 IE6 及以上的所有主流浏览器 完美支持移动端缩放、手势操作 | 兼容 IE6 及以上的所有主流浏览器 完美支持移动端缩放、手势操作 | 兼容IE9 及以上的所有主流浏览器 完美支持移动端缩放、手势操作 | 兼容IE9 及以上的所有主流浏览器 完美支持移动端缩放、手势操作 |
自由度 | 低 | 低 | 高 | 高 |
代码复用率 | 低:封装程度已非常高,所以很难对其进一步抽象和封装 | 低:封装程度已非常高,所以很难对其进一步抽象和封装 | 高:可根据自己的 UI 需求,封装自己的 charts 库 | 高:有一套完善的可视化语法,所以团队或公司可根据自己的 UI 需求,用 g2 做底层库,封装自己的 charts 库 |
效果 | 样式默认,较美观 | 样式默认,较美观 | 样式默认,较美观 | 在样式上并没有做很多的设置,较单薄 |
渲染速度 | 一般 | 一般 | 较快 | 快 |
产品受众 | 无数据可视化知识的前端工程师 | 无数据可视化知识的前端工程师 | 1、数据可视化工程师 2、希望向数据可视化领域发展的前端工程师 | 1、希望向中高水平进阶的可视化工程师 2、希望向中高水平进阶的前端工程师 |
基于此,如果能力很强,可以直接用D3或者G2。反之,如果是一个初学者或者对于这方面没那么熟悉,那么就要从这几点来考虑了:如果数据量比较大,可以考虑Echarts;如果只是一些简单的数据,且客户对界面定制较多,则可以考虑使用Highcharts;如果前两者都不能满足需求,那么就只能用D3或者G2来一点一点做了。
若开发时间短,就限制了D3和G2的使用;考虑开发成本也就不能使用Hightcharts(个人免费,商业付费)。所以在再三的比对之下最终选择了Echarts