前端数据可视化之AntV的G2Plot、G6、L7入门
AntV 是蚂蚁金服全新一代数据可视化解决方案，AntV 不是一个解决方案，他是一套解决方案，AntV包括以下解决方案G2：可视化引擎G2Plot：图表库G6 : 图可视化引擎Graphin：基于G6的图分析组件F2 ：移动可视化方案ChartCube：AntV 图表在线制作L7：地理空间数据可视化因为是为下一个项目做技术调研，所以本文重点介绍项目可能用到 的G2Plot、G6、L7 的入门使用一
AntV 是蚂蚁金服全新一代数据可视化解决方案，AntV 不是一个解决方案，他是一套解决方案，AntV包括以下解决方案
- G2：可视化引擎
- G2Plot：图表库
- G6 : 图可视化引擎
- Graphin：基于G6的图分析组件
- F2 ：移动可视化方案
- ChartCube：AntV 图表在线制作
- L7：地理空间数据可视化
因为是为下一个项目做技术调研，所以本文重点介绍项目可能用到 的G2Plot、G6、L7 的入门使用
一、G2Plot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<title>antV-G2Plot demo</title>
</head>
<body>
<div id="g2-container"></div>
<script>
const { Line } = G2Plot;
const chartData = [
{ year: 2015, value: 100 },
{ year: 2016, value: 200 },
{ year: 2017, value: 250 },
{ year: 2018, value: 410 },
{ year: 2019, value: 953 },
{ year: 2020, value: 1030 },
{ year: 2021, value: 100 },
];
const line = new Line('g2-container', {
data: chartData,
xField: 'year',
yField: 'value',
});
line.render();
</script>
</body></html>效果图：
经过看了官方的文档和官方的示例，总结了下，G2Plot的绘图流程如下：
1、引入js库
2、编写渲染容器DOM
3、准备渲染数据
4、获取渲染DOM对象
5、初始化G2Plot绘图对象，配置相关参数
6、调用render完成渲染
二、G6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>antV-G6 Demo</title>
</head>
<body>
<div id="mountNode"></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
<script>
// 定义数据源
const data = {
// 点集
nodes: [
{
id: 'node1',
x: 100,
y: 200,
label: 'hello',
size: 60,
labelCfg: {
position: 'center',
style: {
fontSize: 12
}
},
style: {
stroke: '#888',
lineWidth: 3
}
},
{
id: 'node2',
x: 300,
y: 200,
size: 60,
label: 'world'
},
],
// 边集
edges: [
{
source: 'node1',
target: 'node2',
label: '连接线'
},
],
};
// 创建 G6 图实例
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 500,
});
graph.data(data);
graph.render();
</script>
</body></html>效果图：
G6的绘图流程如下：
1、引入js库
2、编写渲染容器DOM
3、准备渲染数据
4、获取渲染DOM对象
5、初始化G6绘图对象（如：G6.Graph），配置相关参数
6、调用render完成渲染
三：L7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://unpkg.com/@antv/l7'></script>
<title>antV-L7 demo</title>
<style>
body {margin: 0;padding: 0;}
</style>
</head>
<body>
<div id="l7-map"></div>
<script>
const scene = new L7.Scene({
id: 'l7-map',
map: new L7.GaodeMap({
style: 'dark',
center: [116.412646, 39.911797],
pitch: 0,//地图仰角
zoom: 4,
token: 'e865388347***********'//换自己的高德key
}),
})
//显示全球发电站
fetch("https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json")
.then(res => res.json()).then(data => {
data.features = data.features.filter(item => item.properties.capacity > 500)//显示发电量大于500的
const pointLayer = new L7.PointLayer({}).source(data).shape('circle').size('capacity', [0, 10]).color('capacity', ['#0A3663','#1558AC','#3771D9','#4D89E5','#64A5D3','#72BED6','#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
]).style({
strokeWidth: 0,
opacity: 0.7
}).active(true);
scene.addLayer(pointLayer);
})
</script>
</body></html>效果图：
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：学习过程的简单记录，若有不恰当之处，欢迎指正！
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)