vue 使用 AntV X6 绘制流程图

vue 使用 AntV X6 绘制流程图

安装及使用

1. 通过 npm 命令 node16 X6。

   npm install @antv/x6 --save

2. 在使用的页面用 import 进行引用。

   import { Graph } from ‘@antv/x6’;

3. 在页面中创建一个用于容纳 X6 绘图的容器，可以是一个 div 标签。

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

4. 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' } }
  }
]

5. 渲染画布

• 创建一个 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)

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