如何在H5中使用antv/G6

在 H5 中使用 AntV G6，你需要先引入 G6 库，可以通过以下方式进行引入：

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.3/dist/g6.min.js"></script>

然后，你可以在 JavaScript 代码中使用 G6 的 API 来创建图形，例如：

const data = {
  nodes: [
    { id: 'node1', x: 100, y: 100 },
    { id: 'node2', x: 200, y: 100 },
  ],
  edges: [
    { source: 'node1', target: 'node2' }
  ]
};

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight;

const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  modes: {
    default: ['drag-node']
  },
  defaultNode: {
    size: [50, 30],
    style: {
      fill: '#C6E5FF',
      stroke: '#5B8FF9',
      lineWidth: 2
    }
  },
  defaultEdge: {
    style: {
      stroke: '#e2e2e2',
      lineWidth: 2
    }
  },
  layout: {
    type: 'dagre',
    rankdir: 'LR'
  },
  animate: true
});

graph.data(data);
graph.render();

在上述代码中，我们首先定义了一个数据对象，包含了两个节点和一条边。然后，我们创建了一个 G6.Graph 实例，指定了需要渲染的容器和一些配置项，例如节点和边的样式、布局方式等。最后，我们将数据传入 G6.Graph 实例中，并调用 render 方法进行渲染。这样就可以在 H5 中展示一个简单的图形了。