数据可视化图表插件调研：Echarts、Highcharts、G2、D3

目前常用于前端网页数据可视化实现的图表插件主要有四款：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