Antv-g6 绘图流程
程序员文章站
2022-04-21 23:26:48
...
- 引入js库
- 编写渲染容器DOM
- 准备渲染数据
- 获取渲染DOM对象
- 初始化G6绘图对象，配置绘图参数
- 调用render完成渲染
效果：
代码：
<!--
* @Author: your name
* @Date: 2020-07-02 22:49:08
* @LastEditTime: 2020-07-02 23:11:54
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /css/test-g6.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.3.1/dist/g6.min.js"></script>
</head>
<body>
<div id='g6-chart'></div>
</body>
<script>
const data = {
nodes:[
{
id:'node1',
x:100,
y:200,
label:"起始点",
size:60,
//文字标签的配置
labelCfg:{
position:'center',//top left right 默认center
style:{
fontSize:12,
fill:'#fff',
}
},
//圆圈的样式
style:{
fill:'#ff0000',
stroke:'#888',
lineWidth:3
}
},
{
id:'node2',
x:300,
y:200,
label:"目标点1",
size:80
},
{
id:"node3",
x:500,
y:200,
label:"目标点3",
size:100
},
{
id:"node4",
x:300,
y:300,
label:"目标点4",
size:80
}
],//点集
edges:[
{
source:'node1',
target:"node2",
label:"连接线1"//线上显示的文字
},
{
source:'node2',
target:"node3",
label:"连接线2"
},
{
source:'node1',
target:"node4",
label:"连接线3"
}
]//边集
};
const graph = new G6.Graph({
container:'g6-chart',
width:800,
height:500,
});//完成G6 图的初始化
graph.data(data);//绑定数据源
graph.render();//绘制矢量图
</script>
</html>
上一篇： 网络上经典暴笑语录
下一篇： C++:纯虚函数与抽象类