最近在看web前端可视化的一些插件，之前用过d3，了解过百度的Echarts，后来又发现了蚂蚁金服的AntV系列的G2/G6/F2系列。所以就调研了一下可视化图表库的特点，并用每一种工具尝试实现了简单的气泡图。
ECharts
底层依赖轻量级的 Canvas 类库 ZRender的
纯 Javascript 的图表库。Echarts3中提供SVG绘制。
特点：
1、主要通过提供修改配置项来设置图表内容。看实例比看官方文档更容易懂。
2、只能绘制实例库中有的图表，扩展性不佳。但开发比较完善，常用图表和功能完善度比较高。
3、基于canvas绘制，提供导出为图片的功能。
4、Angular 中可以安装echarts 包和ngx-charts包实现调用。React中根据在webpack中使用ECharts说明调用
5、对map相关应用的支持较好，可以调用百度api
HighCharts
利用SVG和VML渲染JavaScript (HTML5) 图表
特点：
1、图表内容丰富，设置方式类似ECharts。ui设计没有ECharts 美观。
2、说明文档详细易懂，插件稳定性好
3、提供React和Angular的支持
G2
官方说的是基于可视化编码的图形语法
特点：
1、和ECharts/HighCharts相比，没有配置项，更贴近图形语法。
2、支持React / Vue / Angular 中使用G2，详情见使用说明
d3
偏底层的可视化插件，基于DOM操作的从数据到SVG属性的计算框架。3.x版本及之前主要基于SVG画图，4.x版本开始支持canvas画图。
对比
| 内容 | ECharts | G2 | d3 |
|---|---|---|---|
| 图表类型 | 基本图形[1] | 基本图形 +分面图、回归曲线 | 基于d3.layout（饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy））设计 |
| 交互功能 | 基本交互[2] | 更丰富多样的基本交互 | 基于鼠标事件和键盘事件设计交互 |
参考资料
Echarts Examples
蚂蚁金服数据可视化
d3实现例子
网友评论