使用antv/g6在Vue中实现流程图
使用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', // String，该节点存在则必须，节点的唯一标识
x: 700, // Number，可选，节点位置的 x 值
y: 200, // Number，可选，节点位置的 y 值
type: 'rect',
label: '市生态环境局',
style: {
fill: '#18c298ad',
stroke: '#18c298',
lineWidth: 2,
radius: 7
},
extraText: '[派发]'
},
{
id: 'node5', // String，该节点存在则必须，节点的唯一标识
x: 900, // Number，可选，节点位置的 x 值
y: 200, // Number，可选，节点位置的 y 值
type: 'rect',
label: '省生态环境厅',
style: {
fill: '#0063ffb5',
stroke: '#0063ff',
lineWidth: 2,
radius: 7
},
extraText: '[派发]'
},
{
id: 'node6', // String，该节点存在则必须，节点的唯一标识
x: 1200, // Number，可选，节点位置的 x 值
y: 200, // Number，可选，节点位置的 y 值
type: 'rect',
label: '完成',
style: {
fill: '#0063ffb5',
stroke: '#0063ff',
lineWidth: 2,
radius: 7
},
// 设置箭头位置 https://antv-g6.gitee.io/zh/docs/manual/middle/elements/nodes/anchorpoint
anchorPoints: [
[0, 0.5],
[0.5, 0.5]
]
},
{
id: 'node7', // String，该节点存在则必须，节点的唯一标识
x: 1200, // Number，可选，节点位置的 x 值
y: 300, // Number，可选，节点位置的 y 值
type: 'rect',
label: '已完成',
style: {
fill: '#18c298ad',
stroke: '#18c298',
lineWidth: 2,
radius: 7
},
anchorPoints: [
[0, 0.5],
[0.5, 0.5]
]
},
{
id: 'node8', // String，该节点存在则必须，节点的唯一标识
x: 1200, // Number，可选，节点位置的 x 值
y: 400, // Number，可选，节点位置的 y 值
type: 'rect',
label: '进行中',
style: {
fill: '#ffc107',
stroke: '#ff9800',
lineWidth: 2,
radius: 7
},
anchorPoints: [
[0, 0.5],
[0.5, 0.5]
]
},
{
id: 'node9', // String，该节点存在则必须，节点的唯一标识
x: 1200, // Number，可选，节点位置的 x 值
y: 500, // Number，可选，节点位置的 y 值
type: 'rect',
label: '未开始',
style: {
fill: '#0063ffb5',
stroke: '#0063ff',
lineWidth: 2,
radius: 7
},
anchorPoints: [
[0.5, 0.5],
[1, 0.5]
]
}
],
// 边集
edges: [
{
source: 'node1', // String，必须，起始点 id
target: 'node2', // String，必须，目标点 id
label: '', // 边的文本
style: {
// endArrow: true,
// startArrow: false,
// 箭头样式
endArrow: {
lineDash: false,
path: G6.Arrow.triangle(10, 10, 2), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
d: 2,
fill: '#18c298ad',
stroke: '#18c298'
// ...
},
fill: '#18c298ad',
stroke: '#18c298'
}
},
{
source: 'node2', // String，必须，起始点 id
target: 'node3', // String，必须，目标点 id
label: '', // 边的文本
style: {
// endArrow: true,
// startArrow: false,
endArrow: {
lineDash: false,
path: G6.Arrow.triangle(10, 10, 2),
d: 2,
fill: '#18c298ad',
stroke: '#18c298'
// ...
},
fill: '#18c298ad',
stroke: '#18c298'
}
},
{
source: 'node3', // String，必须，起始点 id
target: 'node4', // String，必须，目标点 id
label: '', // 边的文本
style: {
// endArrow: true,
// startArrow: false,
endArrow: {
lineDash: false,
path: G6.Arrow.triangle(10, 10, 2),
d: 2,
fill: '#18c298ad',
stroke: '#18c298'
// ...
},
fill: '#18c298ad',
stroke: '#18c298'
}
},
{
source: 'node4', // String，必须，起始点 id
target: 'node3', // String，必须，目标点 id
label: '不合格', // 边的文本
type: 'polyline',
controlPoints: [{ x: 750, y: 250 }, { x: 550, y: 250 }],
style: {
endArrow: {
path: G6.Arrow.triangle(10, 10, 2),
d: 2,
fill: '#18c298ad',
stroke: '#18c298'
}
},
fill: '#18c298ad',
stroke: '#18c298'
},
{
source: 'node4', // String，必须，起始点 id
target: 'node5', // String，必须，目标点 id
label: '合格', // 边的文本
style: {
// endArrow: true,
// startArrow: false,
fill: '#0063ffb5',
stroke: '#0063ff',
endArrow: {
lineDash: false,
path: G6.Arrow.triangle(10, 10, 2),
d: 2,
fill: '#0063ffb5',
stroke: '#0063ff'
// ...
}
}
},
{
source: 'node5', // String，必须，起始点 id
target: 'node6', // String，必须，目标点 id
label: '', // 边的文本
style: {
lineDash: [5, 5, 5],
fill: '#0063ffb5',
stroke: '#0063ff',
endArrow: {
lineDash: false,
path: G6.Arrow.triangle(10, 10, 2),
d: 2,
fill: '#0063ffb5',
stroke: '#0063ffb5'
}
}
},
{
source: 'node6', // String，必须，起始点 id
target: 'node7', // String，必须，目标点 id
label: '', // 边的文本
style: {
lineDash: [5, 5, 5],
fill: '#ddd',
stroke: '#ddd'
},
type: 'hvh'
},
{
source: 'node7', // String，必须，起始点 id
target: 'node8', // String，必须，目标点 id
label: '', // 边的文本
style: {
lineDash: [5, 5, 5],
fill: '#ddd',
stroke: '#ddd'
},
type: 'hvh'
},
{
source: 'node8', // String，必须，起始点 id
target: 'node9', // String，必须，目标点 id
label: '', // 边的文本
style: {
lineDash: [5, 5, 5],
fill: '#ddd',
stroke: '#ddd'
},
type: 'hvh'
}
]
}
}
},
mounted() {
this.getView()
},
methods: {
getView() {
const container = document.getElementById('mountNode')
const width = container.scrollWidth
const height = container.scrollHeight
// const width = window.
const graph = new G6.Graph({
modes: {
default: ['drag-canvas', 'zoom-canvas'] // 允许拖拽画布、放缩画布、拖拽节点
},
container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
fitView: true, // 是否将图适配到画布大小，可以防止超出画布或留白太多。
width: width, // Number，必须，图的宽度
height: height, // Number，必须，图的高度
size: [100, 500]
})
G6.registerNode('diamond', {
options: {
style: {},
stateStyles: {
hover: {},
selected: {}
}
},
/**
* 绘制节点，包含文本
* @param {Object} cfg 节点的配置项
* @param {G.Group} group 图形分组，节点中图形对象的容器
* @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get('keyShape') 可以获取。
* 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
*/
draw(cfg, group) {},
/**
* 绘制后的附加操作，默认没有任何操作
* @param {Object} cfg 节点的配置项
* @param {G.Group} group 图形分组，节点中图形对象的容器
*/
afterDraw(cfg, group) {},
/**
* 更新节点，包含文本
* @override
* @param {Object} cfg 节点的配置项
* @param {Node} node 节点
*/
update(cfg, node) {},
/**
* 更新节点后的操作，一般同 afterDraw 配合使用
* @override
* @param {Object} cfg 节点的配置项
* @param {Node} node 节点
*/
afterUpdate(cfg, node) {},
/**
* 响应节点的状态变化。
* 在需要使用动画来响应状态变化时需要被复写，其他样式的响应参见下文提及的 [配置状态样式] 文档
* @param {String} name 状态名称
* @param {Object} value 状态值
* @param {Node} node 节点
*/
setState(name, value, node) {},
/**
* 获取锚点（相关边的连入点）
* @param {Object} cfg 节点的配置项
* @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有控制点
*/
getAnchorPoints(cfg) {}
},
// 继承内置节点类型的名字，例如基类 'single-node'，或 'circle', 'rect' 等
// 当不指定该参数则代表不继承任何内置节点类型
'single-node', // 基于 single-node 为例进行扩展
)
// 动态设置节点样式
// graph.node((node) => {
// console.log(node)
// return {
// id: node.id,
// type: 'rect',
// style: {
// fill: 'blue'
// }
// }
// })
graph.data(this.data) // 读取 Step 2 中的数据源到图上
// 给节点下方展示额外的文字
graph.on('afterrender', () => {
graph.getNodes().forEach(node => {
const { extraText, text1 } = node.getModel()
const bbox = node.getBBox()
const centerX = bbox.minX + bbox.width / 2
const centerY = bbox.minY + bbox.height / 2
const textGroup = graph.get('group').addGroup()
const texta = textGroup.addShape('text', {
attrs: {
text: text1,
x: centerX,
y: centerY + 45,
textAlign: 'center',
textBaseline: 'middle',
type: 'rect',
fill: '#000',
cursor: 'pointer',
fontSize: 12
}
})
textGroup.addShape('text', {
attrs: {
text: extraText,
x: centerX,
y: centerY + 25,
textAlign: 'center',
textBaseline: 'middle',
fill: '#000',
fontSize: 12
}
})
// 添加边框
const bbox1 = texta.getBBox()
if (bbox1.height !== 0) {
textGroup.addShape('rect', {
attrs: {
x: bbox1.x - 4,
y: bbox1.y - 4,
width: bbox1.width + 10,
height: bbox1.height + 8,
stroke: '#000',
lineWidth: 2,
cursor: 'pointer',
radius: 7
}
})
}
// 指定文字的点击事件
texta.on('click', () => {
// 处理点击事件的逻辑
console.log('Label clicked!')
})
})
})
graph.render() // 渲染图
}
}
}
</script>
<style>
#mountNode{
width: 100%;
height: 500px;
}
</style>
最终实现的效果
