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:学习过程的简单记录,若有不恰当之处,欢迎指正!