前端数据可视化之AntV的G2Plot、G6、L7入门

AntV 是蚂蚁金服全新一代数据可视化解决方案，AntV 不是一个解决方案，他是一套解决方案，AntV包括以下解决方案

• G2：可视化引擎
• G2Plot：图表库
• G6 : 图可视化引擎
• Graphin：基于G6的图分析组件
• F2 ：移动可视化方案
• ChartCube：AntV 图表在线制作
• L7：地理空间数据可视化

因为是为下一个项目做技术调研，所以本文重点介绍项目可能用到 的G2Plot、G6、L7 的入门使用

一、G2Plot 

效果图：

经过看了官方的文档和官方的示例，总结了下，G2Plot的绘图流程如下：

1、引入js库

2、编写渲染容器DOM

3、准备渲染数据

4、获取渲染DOM对象

5、初始化G2Plot绘图对象，配置相关参数

6、调用render完成渲染

二、G6

效果图：

G6的绘图流程如下：

1、引入js库

2、编写渲染容器DOM

3、准备渲染数据

4、获取渲染DOM对象

5、初始化G6绘图对象（如：G6.Graph），配置相关参数

6、调用render完成渲染

三：L7

效果图：

L7的绘图流程如下：

1、引入js库

2、编写渲染容器DOM

3、初始化地图对象L7.Scence

4、请求数据

5、数据清洗(如果需要的话)

6、初始化绘图对象（如：L7.PointLayer）

7、调用scene.addLayer方法绘图

 

本文是简单写了几个展示demo，很多个性化配置项是没有展示出来的，不过antV官方文档挺详细的，根据需求翻官方文档就行，这类框架使用都是根据API配置对应参数，只要耐心找，总能找到的！（哈哈哈）

官方文档传送门：

G2Plot：https://g2plot.antv.vision/en/docs/manual/introduction

G6：https://g6.antv.vision/en/docs/manual/introduction

L7：https://l7.antv.vision/en/docs/api/l7

 

ps：学习过程的简单记录，若有不恰当之处，欢迎指正！