antv G6绘制流程图

先贴上实现的效果图

  G6官网，关于G6的使用，可以自行进入官网查看。

按照官网可以绘制出简单的流程

 但是当实际绘制流程图时，简直是要被连接线的折点给搞崩溃。

节点配置项

anchorPoints：指定边连入节点的连接点的位置（相对于该节点而言），可以为空。例如: [0, 0]，代表节点左上角的锚点，[1, 1],代表节点右下角的锚点。

一个节点可以有多个锚点。（写法如 anchorPoints: [ [0.5, 0.5],[1, 0.5],[0,0.5] ]）

如果只设置了节点的锚点，两个节点会就近寻找锚点进行连接，就会变成如下图的效果，显然不是我们想要的。

 那么需要固定连接线在起始节点和终止节点上的锚点，就需要对边配置项进行一些操作了。

sourceAnchor ：边的起始节点上的锚点的索引值。

 argetAnchor：边的终止节点上的锚点的索引值。

把上图的2-7为例，2的锚点 anchorPoints: [[0.5, 0], [1, 0.5],[0.5, 1]], 

那么配置边 { source: "2", target: "7",sourceAnchor:2},指定了2-7连接线连接2锚点是2锚点中的第三个，也就是[0.5,1]；同理8也是这样。固定了锚点索引值后，我们想要的效果就出来了。

 全部代码

<template>
    <div id="mountNode">
    </div>
</template>
<script>
import utils from "@/plugin/utils";
import G6 from '@antv/g6';
import insertCss from 'insert-css';
const data = {
   //节点
      nodes: [
        {
          id: "1",
          name: "**上报",
          x: 280,
          y: 30,
          anchorPoints: [
            [0.5, 0.5],[1, 0.5],[0,0.5]
          ],
        },
        {
          id: "2",
          name: "**受理",
          x: 280,
          y: 150,
          anchorPoints: [
            [0.5, 0],
            [1, 0.5],
            [0.5, 1],
          ],
        },
        {
          id: "3",
          name: "**上报",
          x: 450,
          y: 100,
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
        },
        {
          id: "4",
          name: "***初审",
          x: 30,
          y: 250,
          anchorPoints: [
            [0.5, 0],
            // [1, 0.5],
          ],
        },
        {
          id: "5",
          name: "**初审",
          x: 180,
          y: 250,
        },
        {
          id: "6",
          name: "***经办人初审",
          x: 350,
          y: 250,
        },
        {
          id: "7",
          name: "***经办人初审",
          x: 500,
          y: 250,
          anchorPoints:[