vue+antvg6流程图

前言

这是一个简单的demo，后期根据需求逐步更新。
给大家分享一下g6的官网地址。

https://www.yuque.com/antv/g6/intro

vue中进行引入

npm install @antv/g6 --save

完整代码

<template>
  <div class="flowChart">
    <div id="mountNode"></div>
  </div>
</template>
<script>
import G6 from '@antv/g6';
export default {
  mounted() {
this.initG6()
},
methods: {
 initG6() {
    const data = {
      nodes: [{
        id:'node1',
        x: 50,//节点x轴位置
        y: 200,//节点y轴位置
        size: [90, 50],//图形尺寸
        type: 'rect',//节点的形状
        label: '开始',//节点内的文本名称
        style: {
            radius:10, //bordr-radius
            stroke: '#E3C12B', //border色
            fill: '', //填充色
            lineWidth: 2 //border宽
        }
      }, {
        id:'node2',
          x: 220,
          y: 200,
          size: [110, 70],//节点的长宽值
          type: 'rect',
          label: '发起声请',
          style: {
            stroke: '#58F5F2', //border色
            fill: '', //填充色
            lineWidth: 2 //border宽
        },
        anchorPoints: [
            // [0, 0.5],
            // [0, 0.5],
            // [0, 0.5],
          ],

      }, 
       
      {
          id:'node3',
          x: 400,
          y: 200,
          size: [110, 70],//节点的长宽值
          type: 'rect',
          label: '专人审核',
          style: {
            stroke: '#E3C12B', //border色
            fill: '', //填充色
            lineWidth: 2 //border宽
        }
      },{
          id:'node6',
          x: 400,
          y: 400,
          size: [110, 70],
          type: 'rect',
          label: '未通过',
          style: {
            stroke: '#58F5F2', //border色
            fill: '', //填充色
            lineWidth: 2 //border宽
          },

      }, 
      {
          id:'node4',
          x: 600,
          y: 200,
          size: [110, 70],
          type: 'diamond',
          label: '判定',
          style: {
            stroke: '#58F5F2', //border色
            fill: '', //填充色
            lineWidth: 2 //border宽
        },
        anchorPoints: [
            [0,0.5],
            [0.5,0],
            [0.5,1],
          ],
      },
      {
          id:'node8',
          x: 780,
          y: 50,
          size: [110, 70],//节点的长宽值
          type: 'rect',
          label: '审核通过',
          style: {
            stroke: '#58F5F2', //border色
            fill: '', //填充色
            lineWidth: 2 //border宽
        },
      },{
          id:'node5',
          x: 1100,
          y: 200,
          size: [90, 50],
          type: 'rect',
          label: '结束',
          style: {
            radius:10, //bordr-radius
            stroke: '#E3C12B', //border色
            fill: '', //填充色
            lineWidth: 2 //border宽
        }
      }, 
      {
          id:'node7',
          x: 950,
          y: 200,
          size: [110, 70],
          type: 'rect',
          label: '配置完成',
          style: {
            stroke: '#58F5F2', //border色
            fill: '', //填充色
            lineWidth: 2 //border宽
          },
          anchorPoints: [
            [0.5,0],
            [1,0.5],
            [1,0],
          ],
      },],
      edges: [{
          source: "node1",
          target: "node2"
      },{
          source: "node2",
          target: "node3",
          sourceAnchor:2
      },{
          source: "node7",
          target: "node5"
      }, {
          source: "node3",
          target: "node4"
      }, {
          source: "node6",
          target: "node2",
      },  {
          source: "node4",
          target: "node6",
          sourceAnchor:3
      },
      {
          source: "node4",
          target: "node8",
          sourceAnchor:3
      },
      {
          source: "node8",
          target: "node7"
      }
      ]
      };
      const graph = new G6.Graph({
        container: 'mountNode',
        width: window.innerWidth,
        height: window.innerHeight,
        // fitCenter: true, //屏幕中间
        modes: {
            // default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
        },
        defaultEdge:{
              type:"polyline",
                style: {
                lineWidth: 2,
                stroke: '#58F5F2',
                //这是网上找的一个写法，具体参数是如何实现我也不知道，自己可以都是试下
                 endArrow: {
                   path: 'M 0,0 L 10,5 L 10,-5 Z',
                    d: 0,
                   fill: '#58F5F2',
                },
                
                },
        },
        defaultNode: {
            label: 'node-label',
            labelCfg: {
                offset: [10, 10, 10, 10],
                style: {
                    fill: '#fff',
                    fontSize: 20,
                    fontWeight: 'bold',
                }
            },
        },
      });
      graph.data(data);
      graph.render();
    }
   }


}
</script>
<style lang="scss" scoped>
.flowChart {
  width: 100%;
  height: calc(100vh - 84px);
  background-color: #0C3331;
  background-image: url(/static/img/bg_03.c888a4a1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #1CE7F1;
  padding: 70px 50px;
  color: #19AFA7;
}
</style>

效果图