首先，确保已经在HTML文件中引入了G6库。这可以通过在<head>标签中添加以下脚本实现：
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>接着，在HTML文件中的<body>标签内，创建一个具有特定id的div元素来作为G6图的容器：
<div id="graph" style="width: 800px; height: 600px;"></div>最后，在脚本中初始化G6图并添加节点和边。以下是一个简单的示例：
// 初始化图形
var graph = new G6.Graph({
container: 'graph', // 图表的容器id
width: 800, // 图表宽度
height: 600, // 图表高度
modes: {
default: ['drag-canvas', 'zoom-canvas'], // 允许的操作
},
});
// 创建节点数据
var data = {
nodes: [
{ id: 'node1', label: 'Node 1' },
{ id: 'node2', label: 'Node 2' },
{ id: 'node3', label: 'Node 3' },
],
edges: [
{ source: 'node1', target: 'node2' },
{ source: 'node2', target: 'node3' },
],
};
// 读取数据
graph.data(data);
// 渲染图
graph.render();在这个例子中，我们首先初始化了一个G6图，并指定了其容器、大小和允许的操作。然后，我们定义了一些节点和边，并将这些数据应用到图中。最后，我们调用graph.render()方法来渲染图。
