vue 使用 AntV X6 绘制流程图

【代码】vue 使用 AntV X6 绘制流程图。

皮卡皮卡

3865人浏览 · 2023-06-01 17:27:53

皮卡皮卡 · 2023-06-01 17:27:53 发布

vue 使用 AntV X6 绘制流程图

在这里插入图片描述

安装及使用

通过 npm 命令 node16 X6。

npm install @antv/x6 --save
在使用的页面用 import 进行引用。

import { Graph } from ‘@antv/x6’;
在页面中创建一个用于容纳 X6 绘图的容器，可以是一个 div 标签。

<div id='container1' class='step-box' ref='stepBox'></div>

X6 支持 JSON 格式数据，该对象中需要有节点 nodes 和边 edges 字段，分别用数组表示：

let nodeList = [
  {
    id: 'START', // String，可选，节点的唯一标识
     x: 40, // Number，必选，节点位置的 x 值
      y: 40, // Number，必选，节点位置的 y 值
      width: 150, // Number，可选，节点大小的 width 值
      height: 60, // Number，可选，节点大小的 height 值
      label: 'node1', // String，节点标签
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92' },// 边框颜色
      label: { text: 'node1', fill: '#6bcd92', fontSize: 24 }
    },
    data: { disableMove: false }//true为可拖拽，false不可拖拽
  },
  {
    id: 'node2',
    x: 280,
    y: 40,
    width: 150,
    height: 60,
    label: 'node2',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node2', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node3',
    x: 520,
    y: 40,
    width: 150,
    height: 60,
    label: 'node3',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node3', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node4',
    x: 520,
    y: 160,
    width: 150,
    height: 60,
    label: 'node4',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node4', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node5',
    x: 760,
    y: 40,
    width: 150,
    height: 60,
    label: 'node5',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node5', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node6',
    x: 1000,
    y: 40,
    width: 150,
    height: 60,
    label: 'node6',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node6', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node7',
    x: 1000,
    y: 160,
    width: 150,
    height: 60,
    label: 'node7',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node7', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node8',
    x: 1240,
    y: 40,
    width: 150,
    height: 60,
    label: 'node8',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node8', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node9',
    x: 1480,
    y: 40,
    width: 150,
    height: 60,
    label: 'node7',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node7', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node10',
    x: 1720,
    y: 40,
    width: 150,
    height: 60,
    label: 'node10',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: {
        text: 'node10',
        fill: '#6bcd92',
        fontSize: 24,
        cursor: 'pointer'
      }
    },
    data: { disableMove: false }
  },
  {
    id: 'node11',
    x: 1960,
    y: 40,
    width: 150,
    height: 60,
    label: 'node11',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#e7ba7a', cursor: '' },
      label: { text: 'node11', fill: '#e7ba7a', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node12',
    x: 2200,
    y: 40,
    width: 150,
    height: 60,
    label: 'node12',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node12', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node13',
    x: 2440,
    y: 40,
    width: 150,
    height: 60,
    label: 'node13',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node13', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node14',
    x: 2440,
    y: 160,
    width: 150,
    height: 60,
    label: 'node14',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: {
        text: 'node14',
        fill: '#6bcd92',
        fontSize: 24,
        cursor: 'pointer'
      }
    },
    data: { disableMove: false }
  },
  {
    id: 'node15',
    x: 2680,
    y: 40,
    width: 150,
    height: 60,
    label: 'node15',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node15', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node16',
    x: 2920,
    y: 40,
    width: 150,
    height: 60,
    label: 'node16',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node16', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node17',
    x: 3160,
    y: 40,
    width: 150,
    height: 60,
    label: 'node17',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node17', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'FINISH',
    x: 3400,
    y: 40,
    width: 150,
    height: 60,
    label: 'node18',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6' },
      label: { text: 'node18', fill: '#a6a6a6', fontSize: 24 }
    },
    data: { disableMove: false }
  }
]
let edgesList = [
  {
    source: 'START', // 起始节点 id
    target: 'node2', // 目标节点 id
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node2',
    target: 'node3',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node2',
    target: 'node4',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node3',
    target: 'node5',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node4',
    target: 'node6',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node5',
    target: 'node6',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node6',
    target: 'node8',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node6',
    target: 'node7',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node7',
    target: 'node14',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node8',
    target: 'node9',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node9',
    target: 'node10',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node10',
    target: 'node11',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node11',
    target: 'node12',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node12',
    target: 'node13',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node13',
    target: 'node15',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node14',
    target: 'node15',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node15',
    target: 'node16',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node16',
    target: 'node17',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node17',
    target: 'FINISH',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  }
]

渲染画布

创建一个 Graph 对象，并为其指定一个页面上的绘图容器，通常也会指定画布的大小

const graph = new Graph({
  container: document.getElementById('container1'),
  height: this.$refs.stepBox.clientHeight,
  panning: true, //是否支持拖拽平移
  resizing: true,
  interacting: function (cellView) {
    // 'nodeMovable' 节点是否可以被移动。
    if (
      cellView.cell.getData() != undefined &&
      !cellView.cell.getData().disableMove
    ) {
      return { nodeMovable: false }
    }
    return true
  }
})
// 通过当前浏览器缩放计算流程图的缩放值
if (window.devicePixelRatio <= 1) {
  graph.scale(1)
} else {
  graph.scale(document.documentElement.clientWidth / window.screen.width)
}

使用刚刚创建的 graph 来渲染我们的节点和边

const data = {
  // 节点
  nodes: nodeList,
  // 边
  edges: edgesList
}
graph.fromJSON(data)

此时我们的流程图就全部渲染完成了

其他显示方式

如果流程节点想要展示一个title或者其他信息以这种方式展示，如图
在这里插入图片描述

需要单个设置每个label块的字号及节点块背景

graph.addNode({
  shape: 'path',
  x: 200,
  y: 40,
  width: 150,
  height: 90,
  label: 'path',
  markup: [
              {
                tagName: 'rect',
                selector: 'body',
              },
              {
                tagName: 'rect',
                selector: 'name-rect',
              },
              {
                tagName: 'path',
                selector: 'attrs-rect',
              },
              // {
              //   tagName: 'rect',
              //   selector: 'border-rect',
              // },
              {
                tagName: 'text',
                selector: 'name-text',
              },
              {
                tagName: 'text',
                selector: 'attrs-text',
              }
            ],
            attrs: {
              body: {
                width: 150,
  height: 90,
                rx: 12,
                ry: 12,
                stroke: '#000',// 边框颜色
              },
              'name-text': {
                text: 'aa',
                fill: '#000',
                fontSize: 24,
               
                refY: 60,
              },
              'name-rect': {
                fill: '#000',
              },
              // 'border-rect': {
              //   width: 150,
              //   height:1,
              //   fill: 'none',
              //   stroke:'#b1b1b1',
              //   refY: 45,
              // },
              'attrs-rect': {
                d: 'M 12 0 L 138 0 L 149 7 L 149 35 L 0 35 L 0 7 Z',
               
                fill: '#b1b1b1',
                // refY: 0
              },
              'attrs-text': {
                text: '标题',
                fill: '#ffffff',
                fontSize: 22,
               
                refY: 20,
                // refX: 55,
              }
            },
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...