4个前端可视化库:Echart、AntV 前端可视化工具有哪些

4个前端可视化库：Echart、AntV、D3和Three，你更喜欢用哪一个？

1. ECharts

第一步：获取DOM节点，得到一个容器，待会用于放图表的

第二步：echarts.init(chartDom)：初始化，输入dom节点，得到一个echart的实例

第三步：配置options，用户可以通过json格式的数据，指定图表的内容，从以下几个部分配置：title、tooltip、legend、xAxis、yAxis、series。

第四步：myChart.setOption(option)，把你的配置设置进去，让它按照你的配置来画图。

使用评价：简单易用，难点都封装好了，只需要配置数据即可。所以非常适合小白用户，如果需要在网页中快速展示图表信息，刚好这个图表是比较常规的，不需要过多地调整和配置，就可以采用eCharts。

美观度评价：自带渐入动画、图表配色不错。

2. AntV

AntV是蚂蚁集团数据可视化团队打造的一个非常完善的数据可视化解决方案，进入到AntV的官网中我们可以发现它由七大模块组成:

1. G2|G2Plot：可视化图形语法和通用图表库

2. S2：多维可视分析表格

3. G6|Graphin：关系数据可视化分析工具和图分析组件

4. X6|XFlow：流程图相关的图表和组件

5. L7|L7Plot：地理空间数据可视化框架和地理图表

6. F2|F6：移动端的可视化解决方案

7. AVA：可视分析技术框架

3. D3

D3.js是一个很popular的库，好消息是有很多资料，坏消息是很多都是英文的。

而且在看官网的案例之前，要先搞懂Observable，不然，案例会看得你怀疑人生。

它一般结合svg进行绘图，用起来很麻烦，像在造轮子，但是灵活度很高，基本上你可以实现任何你想要的图表。

4. Three

Three.js是用来绘制三维图形的，它属于WebGL技术。如果学过OpenGL相关知识，那么用Three.js就会相对比较简单了。

需要采取以下步骤：

1. 创建场景

2. 设置一个Camera，相当于让它当你的眼睛，去看Three世界内的物体

3. 设置渲染器

4. 创建物体，三步走：geometry、material、Mesh(geometry, material)

#程序员# #前端# #可视化# #编程#