antv G6绘制流程图

最新推荐文章于 2024-09-04 15:26:18 发布

麻辣_水煮鱼

最新推荐文章于 2024-09-04 15:26:18 发布

阅读量8.9k

点赞数 3

分类专栏： vue G6 文章标签： antv vue G6绘制流程图

本文链接：https://blog.csdn.net/weixin_42217154/article/details/121957291

版权

本文介绍了如何利用antv G6库绘制流程图，重点讲解了节点的anchorPoints配置以及如何通过sourceAnchor和targetAnchor指定边的起始和终止锚点，以实现精确的连接线布局。在实践中，作者遇到并解决了由于连接线折点导致的问题，展示了通过设置锚点索引值达到理想效果的过程。

摘要由CSDN通过智能技术生成

先贴上实现的效果图

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:[
              [0.5,0]
          ]
        },
        {
          id: "8",
          name: "***经办人初审",
          x: 700,
          y: 250,
          anchorPoints:[
              [0.5,0]
          ]
        },
        {
          id: "9",
          name: "***审核",
          x: 180,
          y: 330,
          anchorPoints: [
            [0.5, 0],
            [0.5, 1],
          ]
        },
        {