可视化插件库-经验帖

最近在看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实现例子

---

1. 以ECharts为参照，其基本图形包括：散点图、折线图、柱状图、地图、雷达图、饼图、K线图、箱线图、热力图、关系图、树状图、矩形树状图、平行坐标、桑基图、漏斗图、仪表盘图、象形柱图、流图、日力图、南丁格尔玫瑰图 ↩

2. 基本交互包括：图例、提示信息、缩放、 视觉映射、辅助元素、地图下钻 ↩