绘制出来的效果如图
antv/x6的 官方文档链接
官方文档都写的很清楚怎么使用了,然后还有高很多配置项需要在使用时仔细阅读,配置项链接
<template>
<div class="flow_chart" ref="parentContent">
<!-- 流程图 -->
<div id="container" ref="container"></div>
</div>
</template>
<script>
import { Graph, Cell, CellView, Node, Shape } from "@antv/x6";
import { FWDataInfo } from "./FWFflowChart";
import { SWDataInfo } from "./SWFflowChart";
export default {
data() {
return {
dataArr: [],
dataInfo: {},
graph: null,
canvasWidth: 0, // 画布宽度
canvasHeight: 0, // 画布高度
};
},
props: {
flowData: {
type: Array,
default: [],
},
docMold: {
type: [Number, String],
default: null,
},
},
mounted() {
if (this.docMold == "1") {
this.dataInfo = FWDataInfo;
}
if (this.docMold == "0") {
this.dataInfo = SWDataInfo;
}
this.initSize();
this.setGraphData();
},
methods: {
/**
* 设置画布大小自适应
*/
initSize() {
const self = this; // 因为箭头函数会改变this指向，指向windows。所以先把this保存
setTimeout(() => {
// todo 浏览器窗口发生变化时
window.onresize = function () {
// todo 获取div parentContent 的宽度和高度
this.canvasWidth = self.$refs.parentContent.clientWidth;
this.canvasHeight = self.$refs.parentContent.clientHeight;
// todo 修改画布的大小
self.graph.changeSize(this.canvasWidth, this.canvasHeight);
// todo 将图移动到画布中心位置
self.graph.fitCenter();
};
}, 20);
},
setGraphData() {
this.graph = new Graph({
container: document.getElementById("container"),
width: "100%",
height: 380,
panning: true,
resizing: true, // 缩放节点
background: {
color: "transparent", // 设置画布背景颜色
},
grid: {
size: 10, // 网格大小 10px
visible: true, // 渲染网格背景
},
mousewheel: {
enabled: true,
modifiers: ["ctrl", "meta"],
},
interacting: (cellView) => {
return {
nodeMovable: false, // 禁止所有节点的拖动
};
},
highlighting: {
// 高亮
magnetAdsorbed: {
name: "stroke",
args: {
attrs: {
fill: "#fff",
stroke: "#409eff",
strokeWidth: 4,
},
},
},
},
});
// 菱形方块
Graph.registerNode(
"lane-polygon",
{
inherit: "polygon",
width: 80,
height: 80,
attrs: {
body: {
strokeWidth: 1,
stroke: "#5F95FF",
fill: "#EFF4FF",
refPoints: "0,10 10,0 20,10 10,20",
},
text: {
fontSize: 12,
fill: "#262626",
},
},
},
true
);
this.graph.addEdge({
connector: { name: "rounded" },
attrs: {
line: {
targetMarker: "classic",
stroke: "#f5222d",
},
},
});
// 标题
Graph.registerNode(
"lane",
{
inherit: "rect",
markup: [
{
tagName: "rect",
selector: "body",
},
{
tagName: "rect",
selector: "name-rect",
},
{
tagName: "text",
selector: "name-text",
},
],
attrs: {
body: {
fill: "#FFF",
stroke: "transparent",
strokeWidth: 1,
},
"name-rect": {
fill: "#5F95FF",
stroke: "#4d4035",
strokeWidth: 1,
// x: -1,
},
"name-text": {
ref: "name-rect",
refY: 0.5,
refX: 0.5,
textAnchor: "middle",
fontWeight: "bold",
fill: "#4d4035",
fontSize: 12,
},
},
},
true
);
// this.graph.centerContent()
// this.graph.zoom(0.1) // 在原来缩放级别上增加 0.2
this.graph.fromJSON(this.dataInfo);
},
},
};
</script>js,文件单独写的data项配置数据
export const FWDataInfo = {
// 节点
nodes: [
{
id: "a_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 32,
"y": 15
},
label: "拟稿(草稿)"
},
{
id: "a", // String，可选，节点的唯一标识
x: 10, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 40, // Number，可选，节点大小的 width 值
height: 300, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "拟稿人",
fill: "#000",
fontSize: 14,
'writing-mode': 'tb-rl',
},
},
parent: "a_title"
},
{
id: "b_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 100,
"y": 15
},
label: "拟稿(审核中)"
},
{
id: "b", // String，可选，节点的唯一标识
x: 80, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 40, // Number，可选，节点大小的 width 值
height: 300, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "部门审核人",
fill: "#000",
fontSize: 14,
'writing-mode': 'tb-rl',
},
},
parent: "b_title"
},
{
id: "c_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 175,
"y": 15
},
label: "拟稿(已审核)"
},
{
id: "c", // String，可选，节点的唯一标识
x: 150, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 40, // Number，可选，节点大小的 width 值
height: 300, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "拟稿部门助理",
fill: "#000",
fontSize: 14,
'writing-mode': 'tb-rl',
},
},
parent: "c_title"
},
{
id: "d", // String，可选，节点的唯一标识
x: 230, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
label: "送会签", // String，节点标签
shape: "lane-polygon",
attrs: {
body: {
fill: "#f2f2f2",
stroke: "#f2f2f2",
strokeDasharray: "10,2",
},
label: {
text: "送会签",
fill: "#000",
fontSize: 14,
},
},
},
{
id: "d_1_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 450,
"y": 15
},
label: "会签(草稿)"
},
{
id: "d_1", // String，可选，节点的唯一标识
x: 340, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 80, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "各个会签部门助理",
fill: "#000",
fontSize: 14,
textWrap: {
text: '各个会签部门助理',
width: -10, // 宽度减少 10px
height: '50%', // 高度为参照元素高度的一半
ellipsis: true, // 文本超出显示范围时，自动添加省略号
breakWord: true, // 是否截断单词
}
},
},
parent: "d_1_title"
},
{
id: "d_2", // String，可选，节点的唯一标识
x: 450, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
label: "送会签", // String，节点标签
shape: "lane-polygon",
attrs: {
body: {
fill: "#f2f2f2",
stroke: "#f2f2f2",
strokeDasharray: "10,2",
},
label: {
text: "送会签",
fill: "#000",
fontSize: 14,
},
},
},
{
id: "d_3_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 620,
"y": 15
},
label: "会签(审核中)"
},
{
id: "d_3", // String，可选，节点的唯一标识
x: 560, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 120, // Number，可选，节点大小的 width 值
height: 80, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "",
fill: "#000",
fontSize: 14,
textWrap: {
text: '各部门会签审核人员',
width: -10, // 宽度减少 10px
height: '50%', // 高度为参照元素高度的一半
ellipsis: true, // 文本超出显示范围时，自动添加省略号
breakWord: true, // 是否截断单词
}
},
},
parent: "d_3_title"
},
{
id: "d_4_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 730,
"y": 15
},
label: "会签(已审核)"
},
{
id: "d_4", // String，可选，节点的唯一标识
x: 710, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 40, // Number，可选，节点大小的 width 值
height: 80, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "组织助理",
fill: "#000",
fontSize: 14,
textWrap: {
text: '组织助理',
width: -10, // 宽度减少 10px
height: '50%', // 高度为参照元素高度的一半
ellipsis: true, // 文本超出显示范围时，自动添加省略号
breakWord: true, // 是否截断单词
}
},
},
parent: "d_4_title"
},
{
id: "d_5_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 820,
"y": 15
},
label: "办理(草稿)"
},
{
id: "d_5", // String，可选，节点的唯一标识
x: 780, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
label: "送办理", // String，节点标签
shape: "lane-polygon",
attrs: {
body: {
fill: "#f2f2f2",
stroke: "#f2f2f2",
strokeDasharray: "10,2",
},
label: {
text: "送办理",
fill: "#000",
fontSize: 14,
},
},
parent: "d_5_title"
},
{
id: "d_6_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 935,
"y": 15
},
label: "办理(审核中)"
},
{
id: "d_6", // String，可选，节点的唯一标识
x: 890, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 100, // Number，可选，节点大小的 width 值
height: 80, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "办理审核人员",
fill: "#000",
fontSize: 14,
},
},
parent: "d_6_title"
},
{
id: "d_7_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 1038,
"y": 15
},
label: "办理(已审核)"
},
{
id: "d_7", // String，可选，节点的唯一标识
x: 1020, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 40, // Number，可选，节点大小的 width 值
height: 80, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "组织助理",
fill: "#000",
fontSize: 14,
textWrap: {
text: '组织助理',
width: -10, // 宽度减少 10px
height: '50%', // 高度为参照元素高度的一半
ellipsis: true, // 文本超出显示范围时，自动添加省略号
breakWord: true, // 是否截断单词
}
},
},
parent: "d_7_title"
},
{
id: "d_8_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 1125,
"y": 15
},
label: "审批(草稿)"
},
{
id: "d_8", // String，可选，节点的唯一标识
x: 1090, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
label: "送审批", // String，节点标签
shape: "lane-polygon",
attrs: {
body: {
fill: "#f2f2f2",
stroke: "#f2f2f2",
strokeDasharray: "10,2",
},
label: {
text: "送审批",
fill: "#000",
fontSize: 14,
},
},
parent: "d_8_title"
},
{
id: "d_9_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 1220,
"y": 15
},
label: "审批(审批中)"
},
{
id: "d_9", // String，可选，节点的唯一标识
x: 1200, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 40, // Number，可选，节点大小的 width 值
height: 80, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "审批领导",
fill: "#000",
fontSize: 14,
textWrap: {
text: '审批领导',
width: -10, // 宽度减少 10px
height: '50%', // 高度为参照元素高度的一半
ellipsis: true, // 文本超出显示范围时，自动添加省略号
breakWord: true, // 是否截断单词
}
},
},
parent: "d_9_title"
},
{
id: "d_10_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 1315,
"y": 15
},
label: "审批(已审批)"
},
{
id: "d_10", // String，可选，节点的唯一标识
x: 1280, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 80, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "组织助理",
fill: "#000",
fontSize: 14,
},
},
parent: "d_10_title"
},
{
id: "d_11_title",
shape: "lane",
width: 50,
height: 20,
position: {
"x": 1440,
"y": 15
},
label: "结束"
},
{
id: "d_11", // String，可选，节点的唯一标识
x: 1400, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
label: "结束", // String，节点标签
shape: "lane-polygon",
attrs: {
body: {
fill: "#f2f2f2",
stroke: "#f2f2f2",
strokeDasharray: "10,2",
},
label: {
text: "结束",
fill: "#000",
fontSize: 14,
},
},
parent: "d_11_title"
},
{
id: "g", // String，可选，节点的唯一标识
x: 1280, // Number，必选，节点位置的 x 值
y: 180, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 80, // Number，可选，节点大小的 height 值
label: "", // String，节点标签
shape: "rect",
attrs: {
body: {
fill: "#e2f2ff",
stroke: "#e2f2ff",
strokeDasharray: "10,2",
},
label: {
text: "拟稿部门助理",
fill: "#000",
fontSize: 14,
textWrap: {
text: '拟稿部门助理',
width: -10, // 宽度减少 10px
height: '50%', // 高度为参照元素高度的一半
ellipsis: true, // 文本超出显示范围时，自动添加省略号
breakWord: true, // 是否截断单词
}
},
},
},
{
id: "e", // String，可选，节点的唯一标识
x: 230, // Number，必选，节点位置的 x 值
y: 150, // Number，必选，节点位置的 y 值
label: "送办理", // String，节点标签
shape: "lane-polygon",
attrs: {
body: {
fill: "#f2f2f2",
stroke: "#f2f2f2",
strokeDasharray: "10,2",
},
label: {
text: "送办理",
fill: "#000",
fontSize: 14,
},
},
},
{
id: "f", // String，可选，节点的唯一标识
x: 230, // Number，必选，节点位置的 x 值
y: 260, // Number，必选，节点位置的 y 值
label: "送审批", // String，节点标签
shape: "lane-polygon",
attrs: {
body: {
fill: "#f2f2f2",
stroke: "#f2f2f2",
strokeDasharray: "10,2",
},
label: {
text: "送审批",
fill: "#000",
fontSize: 14,
},
},
},
],
// 边
edges: [
{
source: "a", // String，必须，起始节点 id
target: "b", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
fontSize: 14,
},
},
},
{
source: "b", // String，必须，起始节点 id
target: "c", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "c", // String，必须，起始节点 id
target: "d", // String，必须，目标节点 id
vertices: [
{ x: 190, y: 80 },
],
router: {
// 路由器配置
name: 'normal', // 正交路由
args: {
direction: 'V', // 垂直优先
},
},
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d", // String，必须，起始节点 id
target: "d_1", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_1", // String，必须，起始节点 id
target: "d_2", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_2", // String，必须，起始节点 id
target: "d_3", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_3", // String，必须，起始节点 id
target: "d_4", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_4", // String，必须，起始节点 id
target: "d_5", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_5", // String，必须，起始节点 id
target: "d_6", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_6", // String，必须，起始节点 id
target: "d_7", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_7", // String，必须，起始节点 id
target: "d_8", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_8", // String，必须，起始节点 id
target: "d_9", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_9", // String，必须，起始节点 id
target: "d_10", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "d_9", // String，必须，起始节点 id
target: "g", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
inherit: 'edge',
vertices: [
{ x: 1220, y: 218 },
],
router: {
// 路由器配置
name: 'orth', // 正交路由
args: {
direction: 'V', // 垂直优先
},
}
},
{
source: "g", // String，必须，起始节点 id
target: "d_11", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
inherit: 'edge',
// vertices: [
// { x: 1340, y: 218 },
// ],
router: {
// 路由器配置
name: 'orth', // 正交路由
args: {
direction: 'V', // 垂直优先
},
}
},
{
source: "d_10", // String，必须，起始节点 id
target: "d_11", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "c", // String，必须，起始节点 id
target: "d_11", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
vertices: [
{ x: 300, y: 361 },
],
router: {
// 路由器配置
name: 'orth', // 正交路由
args: {
direction: 'V', // 垂直优先
},
}
},
{
source: "c", // String，必须，起始节点 id
target: "e", // String，必须，目标节点 id
sourceAnchor: 0,
// 该边连入 target 点的第 0 个 anchorPoint，
targetAnchor: 0,
style: {
endArrow: true,
},
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "e", // String，必须，起始节点 id
target: "d_6", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
// vertices: [
// { x: 800, y: 318 },
// ],
router: {
// 路由器配置
name: 'orth', // 正交路由
args: {
direction: 'V', // 垂直优先
},
}
},
{
source: "c", // String，必须，起始节点 id
target: "f", // String，必须，目标节点 id
vertices: [
{ x: 190, y: 300 },
],
router: {
// 路由器配置
name: 'normal', // 正交路由
args: {
direction: 'V', // 垂直优先
},
},
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
},
{
source: "f", // String，必须，起始节点 id
target: "d_9", // String，必须，目标节点 id
attrs: {
line: {
stroke: '#5b9bd5',
strokeWidth: 1,
},
},
router: {
// 路由器配置
name: 'orth', // 正交路由
args: {
direction: 'V', // 垂直优先
},
}
},
],
}