垂直节点初次demo

<template>
  <div id="mountNode"></div>
</template>

<script>
import G6 from "@antv/g6";
export default {
  data() {
    return {
      gg: {
        // 点集
        nodes: [
          {
            id: "node1",
            x: 100,
            y: 500,
          },
          {
            id: "node2",
            x: 150,
            y: 480,
          },
          {
            id: "node3",
            x: 100,
            y: 450,
          },
           {
            id: "node4",
            x: 100,
            y: 400,
          },
          {
            id: "node5",
            x: 100,
            y: 350,
          },
          {
            id: "node6",
            x: 150,
            y: 300,
          },
        ],
        // 边集
        edges: [
          // 表示一条从 node1 节点连接到 node2 节点的边
          {
            source: "node1",
            target: "node2",
          },
           {
            source: "node2",
            target: "node3",
          },
          {
            source: "node3",
            target: "node4",
          },
           {
            source: "node1",
            target: "node3",
          },
          {
            source: "node3",
            target: "node5",
          },
          {
            source: "node5",
            target: "node6",
          },
        ],
      },
    };
  },
  mounted() {
    this.g6();
  },
  methods: {
    g6() {
      // 创建 G6 图实例
      const graph = new G6.Graph({
        container: "mountNode", // 指定图画布的容器 id，与第 9 行的容器对应
        // 画布宽高
        width: 1800,
        height: 1500,
      });
      graph.data(this.gg);
      graph.render();
    },
  },
};
</script>

<style>
#main {
  width: 1000px;
  height: 1000px;
}
</style>