- 引入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>