1.创建容器（一般为div标签）
<divid="mountNode"></div>
2.数据准备
const data={
// 点集nodes:[{id:'node1',// String，该节点存在则必须，节点的唯一标识x:100,// Number，可选，节点位置的 x 值y:200,// Number，可选，节点位置的 y 值},{id:'node2',// String，该节点存在则必须，节点的唯一标识x:300,// Number，可选，节点位置的 x 值y:200,// Number，可选，节点位置的 y 值},],// 边集edges:[{source:'node1',// String，必须，起始点 idtarget:'node2',// String，必须，目标点 id},],};
3.创建关系图
const graph=new G6.Graph({container:'mountNode',// String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身width:800,// Number，必须，图的宽度height:500,// Number，必须，图的高度});
4.配置数据源，渲染
graph.data(data);// 读取 Step 2 中的数据源到图上
graph.render();// 渲染图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tutorial Demo</title>
</head>
<body>
/* 图的画布容器 */
<div id="mountNode"></div>/* 引入 G6 */ <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,},{id:'node2',x:300,y:200,},],// 边集edges:[// 表示一条从 node1 节点连接到 node2 节点的边{source:'node1',target:'node2',},],};// 创建 G6 图实例constgraph=newG6.Graph({container:'mountNode',// 指定图画布的容器 id，与第 9 行的容器对应// 画布宽高width:800,height:500,});
// 读取数据
graph.data(data);
// 渲染图
graph.render();
</script>
</body>
</html>
