vue 使用 AntV X6 绘制流程图
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)
- 此时我们的流程图就全部渲染完成了