使用antv/g6在Vue中实现流程图

易鹤鹤.

已于 2023-06-30 18:00:49 修改

阅读量5.3k

点赞数 6

分类专栏： vue相关知识文章标签： css html javascript

于 2023-06-30 17:55:45 首次发布

本文链接：https://blog.csdn.net/ssy001128/article/details/131481459

版权

使用antv/g6在Vue中实现流程图，前面还用过bpmn插件，效果没有这个好

1. 在项目中使用 NPM 包引入

 npm install --save @antv/g6

2. 在需要用的 G6 的 JS 文件中导入：

import G6 from '@antv/g6';

Step 1 创建容器

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。

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

Step 2 数据准备引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

const data = {
   
  // 点集
  nodes: [
    {
   
      id: 'node1', // String，该节点存在则必须，节点的唯一标识
      x: 100, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
    },
    {
   
      id: 'node2', // String，该节点存在则必须，节点的唯一标识
      x: 300, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
    },
  ],
  // 边集
  edges: [
    {
   
      source: 'node1', // String，必须，起始点 id
      target: 'node2', // String，必须，目标点 id
    },
  ],
};

注意

nodes 数组中包含节点对象。每个节点对象中唯一的、必要的 id 以标识不同的节点，x、 y 指定该节点的位置；
edges 数组中包含边对象。source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与目标点 id。
点和边的其他属性参见链接：内置节点和内置边。

Step 3 创建关系图创建关系图（实例化）时，至少需要为图设置容器、宽和高。

const graph = new G6.Graph({
   
  container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
  width: 800, // Number，必须，图的宽度
  height: 500, // Number，必须，图的高度
});

Step 4 配置数据源，渲染

graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图

在这里插入图片描述

以上是官网最简单的的例子 G6官网

下面是自己根据要求修改的

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

<script>
import G6 from '@antv/g6'
export default {
   
  data() {
   
    return {
   
      data: {
   
        // 点集
        nodes: [
          {
   
            id: 'node1', // String，该节点存在则必须，节点的唯一标识
            x: 100, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            type: 'rect', // 矩形节点
            label: '省生态环境厅', // 矩形节点框内的文字
            // 矩形节点框样式
            style: {
   
              fill: '#18c298ad',
              stroke: '#18c298',
              lineWidth: 2,
              radius: 7
            },
            // 节点下的文字
            extraText: '[派发]'
          },
          {
   
            id: 'node2', // String，该节点存在则必须，节点的唯一标识
            x: 300, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            type: 'rect',
            label: '市生态环境局',
            style: {
   
              fill: '#18c298ad',
              stroke: '#18c298',
              lineWidth: 2,
              radius: 7
            },
            extraText: '[派发]'
          },
          {
   
            id: 'node3', // String，该节点存在则必须，节点的唯一标识
            x: 500, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            type: 'rect',
            label: '核查员',
            style: {
   
              fill: '#ffc107',
              stroke: '#ff9800',
              lineWidth: 2,
              radius: 7
            },
            extraText: '[派发]',
            text1: '催办'
          },
          {
   
            id: 'node4',