antv/G6层级布局的流向图

<template>
  <div class="welcome" ref="welcome">
    <!-- <div class="logo animated flip slow" ref="logo"></div> -->
    <div id="mountNode"></div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import G6 from '@antv/g6';
export default {
  
  data() {
    return {}
  },
  filters: {},
  created() {
  },
    computed: {
    ...mapGetters([
      'avatar',
      'nickname'
    ])
  },
 watch: {
    nickname(newVal, oldVal){
    }
 },
  mounted() {
    this.initEdge();
    this.createG6()
  },
  methods: {
    initEdge() {
      // return
      this.registerEdge = new G6.registerEdge(
        "circle-running",
        {
          afterDraw(cfg, group) {
            // 获取组中的第一个形状，这是边的路径=
            const shape = group.get("children")[0];
            // 边路径的起始位置
            const startPoint = shape.getPoint(0);

            // 添加蓝色圆圈形状
            const circle = group.addShape("circle", {
              attrs: {
                x: startPoint.x,
                y: startPoint.y,
                fill: "#1890ff",
                r: 3,
              },
              name: "circle-shape",
            });

            // 蓝色圆圈的动画
            circle.animate(
              (ratio) => {
                // 每个帧中的操作。比率范围从0到1，表示动画的进度。返回修改后的配置 根据比率获得边缘上的位置
                const tmpPoint = shape.getPoint(ratio);
                // 这里返回修改后的配置，这里返回x和y
                return {
                  x: tmpPoint.x,
                  y: tmpPoint.y,
                };
              },
              {
                repeat: true, // 是否重复执行动画
                duration: 3000, // 动画完成时间
              }
            );
          },
        },
        "polyline" // 直线
      );
    },
    createG6(){
      const data = {
        nodes: [
          { id: 'node1', label: 'Node 1' },
          { id: 'node2',label: 'Node 2' },
          { id: 'node3',label: 'Node 3' },
          { id: 'node4',label: 'Node 4' },
          { id: 'node5',label: 'Node 5' },
        ],
        edges: [
          { source: 'node1', target: 'node2', label: 'Edge 1' },
          { source: 'node3', target: 'node2', label: 'Edge 2' },
          { source: 'node3', target: 'node2', label: 'Edge 2' },
          { source: 'node2', target: 'node4', label: 'Edge 2' },
          { source: 'node2', target: 'node5', label: 'Edge 2' }
        ]
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 500,
        layout: {
          type: 'dagre',
          rankdir: 'TB' // 设置布局方向为从左到右
        },
        defaultNode: {
          size: [100, 30]
        },
        defaultEdge: {
          type: 'polyline',  
          size: 1
        }
      });
      graph.data(data);
      graph.render();
    }
  }
}
</script>

<style lang="scss" scoped>
.welcome{
  width: 100%;
  height: 100%;
}
</style>