vue中使用antv/G6完成流程图
目录
效果展示
后台数据
处理后台数据
安装
完整js代码
效果展示
- 自定义节点 G6.registerNode
- 根据后端返回数据生成流程图
后台数据
返回的类似数据，需要parentId数组即上级节点，主要来完成节点指向箭头的方向
nodes: [
{
id: "0",
label: "开始节点",
type: "start-node",
parentId: []
},
{
id: "1",
label: "分支节点1",
parentId: ['0']
},
{
id: "2",
label: "分支节点2",
parentId: ['0']
},
{
id: "3",
label: "分支节点3",
parentId: ['0']
},
{
id: "4",
label: "分支节点4",
parentId: ['2','3']
},
{
id: "5",
label: "分支节点5",
parentId: ['1']
},
{
id: "6",
label: "分支节点6",
parentId: ['5']
},
{
id: "7",
label: "分支节点7",
parentId: ['5']
},
{
id: "8",
label: "分支节点8",
parentId: ['7']
},
{
id: "9999",
label: "结束节点",
type: "end-node",
parentId: [],
}
]
处理后台数据
1.加入边集数据
//边集 edges: [ // 表示一条从 node1 节点连接到 node2 节点的边 { source: 'node1', target: 'node2', }, ],
//edges设置
this.data.edges = [];
this.data.nodes.forEach((item) => {
//parentId中为上级节点即source
item.parentId.forEach((id) => {
let json = {
source: id,
target: item.id,
};
this.data.edges.push(json);
});
});
2.关于指向结束节点
//判断倒数第二层
this.data.edges.forEach((s) => {
this.allSource.push(s.source);
});
//数组去重
this.allSource =[... new Set(this.allSource)];
this.data.nodes.forEach((item) => {
//source中不存在则是倒数第二层 除了结束节点
if (!this.allSource.includes(item.id) && item.id!=this.data.nodes[this.data.nodes.length - 1].id) {
this.data.edges.push({
source: item.id,
target: this.data.nodes[this.data.nodes.length - 1].id,
});
}
});
安装
快速上手 | G6A collection of charts made with the Grammar of Graphics
https://antv-g6.gitee.io/zh/docs/manual/getting-started/
tep 1: 使用命令行在项目目录下执行以下命令：
npm install --save @antv/g6Step 2: 在需要用的 G6 的 JS 文件中导入：
import G6 from '@antv/g6';html
完整js代码
引入
import G6 from "@antv/g6";
import dagre from "dagre";export default {
data() {
return {
//来源合集 （集合中不存在即说明为倒数第二层节点）
allSource: [],
data: {
nodes:[],
edges:[]
},
};
},
mounted() {
this.getG6Data();
},
methods: {
getG6Data() {
getG6().then((res) => {
this.data = res.data;
//edges设置
this.data.edges = [];
this.data.nodes.forEach((item) => {
//parentId中为上级节点即source
item.parentId.forEach((id) => {
let json = {
source: id,
target: item.id,
};
this.data.edges.push(json);
});
});
//判断倒数第二层
this.data.edges.forEach((s) => {
this.allSource.push(s.source);
});
//数组去重
this.allSource =[... new Set(this.allSource)];
this.data.nodes.forEach((item) => {
//source中不存在则是倒数第二层 除了结束节点
if (!this.allSource.includes(item.id) && item.id!=this.data.nodes[this.data.nodes.length - 1].id) {
this.data.edges.push({
source: item.id,
target: this.data.nodes[this.data.nodes.length - 1].id,
});
}
});
this.startG6();
});
},
startG6() {
let data = this.copy(this.data);
var g = new dagre.graphlib.Graph();
g.setDefaultEdgeLabel(function () {
return {};
});
g.setGraph({
rankdir: "TB",
});
data.nodes.forEach(function (node) {
// node.label = node.id;
g.setNode(node.id, {
width: 150,
height: 50,
});
});
data.edges.forEach(function (edge) {
g.setEdge(edge.source, edge.target);
});
dagre.layout(g);
var coord = void 0;
g.nodes().forEach(function (node, i) {
coord = g.node(node);
data.nodes[i].x = coord.x;
data.nodes[i].y = coord.y;
});
g.edges().forEach(function (edge, i) {
coord = g.edge(edge);
data.edges[i].startPoint = coord.points[0];
data.edges[i].endPoint = coord.points[coord.points.length - 1];
data.edges[i].controlPoints = coord.points.slice(
1,
coord.points.length - 1
);
});
G6.registerNode(
"operation",
{
drawShape: function drawShape(cfg, group) {
var rect = group.addShape("rect", {
attrs: {
x: -75,
y: -25,
width: 150,
height: 50,
radius: 10,
stroke: "#00C0A5",
fill: "#92949F",
fillOpacity: 0.45,
lineWidth: 2,
},
});
return rect;
},
},
"single-shape"
);
G6.registerNode(
"start-node",
{
drawShape: function drawShape(cfg, group) {
var rect = group.addShape("rect", {
attrs: {
x: -75,
y: -25,
width: 150,
height: 50,
radius: 10,
stroke: "#fff",
fill: "#0090ff",
fillOpacity: 0.45,
lineWidth: 2,
},
});
return rect;
},
},
"single-shape"
);
G6.registerNode(
"end-node",
{
drawShape: function drawShape(cfg, group) {
var rect = group.addShape("rect", {
attrs: {
x: -75,
y: -25,
width: 150,
height: 50,
radius: 10,
stroke: "#fff",
fill: "#0090ff",
fillOpacity: 0.45,
lineWidth: 2,
},
});
return rect;
},
},
"single-shape"
);
var graph = new G6.Graph({
container: "mountNode",
width: window.innerWidth,
height: window.innerHeight,
pixelRatio: 2,
modes: {
default: ["drag-canvas", "zoom-canvas"],
},
defaultNode: {
// shape: "operation",
type: "operation",
labelCfg: {
style: {
fill: "#666",
fontSize: 14,
fontWeight: "bold",
},
},
},
defaultEdge: {
type: "polyline",
style: {
endArrow: {
path: G6.Arrow.triangle(),
},
lineWidth: 2,
stroke: "#ccc",
},
},
});
graph.data(data);
graph.render();
graph.fitView();
},
copy(obj) {
const newobj = obj.constructor === Array ? [] : {};
if (typeof obj !== "object") {
return;
}
for (const i in obj) {
newobj[i] = typeof obj[i] === "object" ? this.copy(obj[i]) : obj[i];
}
return newobj;
},
},
};