使用VUE+ANTV_G6 完成流程关系图2
使用VUE+ANTV_G6 完成流程关系图2
安装依赖：npm install @antv/g6
<template>
<div id="main"></div>
</template>
<script>
import G6 from "@antv/g6";
export default {
data() {
return {
gg: {
nodes: [
{
id: "1",
dataType: "hg",
name: "BEGIN" + "\n" + "A",
// size: 40,//字体大小
// visible: true,//控制是否隐藏
// label: "BEGIN根据专营店ID查询大区小区", //文本
// type: "circle",//圆形===映射节点的形状
// lineWidth: 22, //映射边的粗细
labelCfg: {
positions: "center", // 标签的属性，标签在元素中的位置
style: {
// 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
fontSize: 20, // 标签的样式属性，文字字体大小
fill: "#000", // 样式属性，元素的填充色
// stroke: "#888", // 样式属性，元素的描边色
// opacity: "0.3", //透明度
},
},
},
{
id: "2",
dataType: "hg",
name: "A" + "\n" + "B",
// label: "A校验计划周、推荐数、浮动上下限数据",
},
{
id: "3",
dataType: "alps",
name: "B" + "\n" + "C",
},
{
id: "4",
dataType: "sql",
name: "UPDATE_A" + "\n" + "D",
},
{
id: "5",
dataType: "sql",
name: "UPDATECHECK" + "\n" + "E",
},
{
id: "6",
dataType: "sql",
name: "UPDATE" + "\n" + "F",
},
{
id: "7",
dataType: "sql",
name: "UPDATE_B" + "\n" + "G",
},
{
id: "8",
dataType: "sql",
name: "ADD_A" + "\n" + "H",
},
{
id: "9",
dataType: "sql",
name: "ADD" + "\n" + "I",
},
{
id: "10",
dataType: "sql",
name: "EXIT" + "\n" + "J",
},
],
edges: [
{
source: "1",
target: "2",
},
{
source: "2",
target: "3",
},
{
source: "2",
target: "10",
// 线条备注
label: "DATACHECK",
},
{
source: "3",
target: "4",
label: "U",
},
{
source: "3",
target: "8",
label: "A",
},
{
source: "4",
target: "5",
label: "DATACHECK",
},
{
source: "4",
target: "10",
},
{
source: "5",
target: "6",
},
{
source: "5",
target: "10",
label: "FIELDCHECK",
},
{
source: "6",
target: "7",
},
{
source: "7",
target: "10",
},
{
source: "8",
target: "10",
},
{
source: "8",
target: "9",
},
{
source: "9",
target: "10",
label: "DATACHECK",
},
],
},
};
},
mounted() {
this.g6();
},
methods: {
g6() {
G6.registerNode(
"sql",
{
drawShape(cfg, group) {
const rect = group.addShape("rect", {
//设置图中表格的文字距离位置
attrs: {
x: -100,
y: -50,
width: 210, //每个框框的大小
height: 100,
radius: 10,
stroke: "#5B8FF9",//name属性字体颜色
fill: "#C6E5FF",
lineWidth: 3,
},
name: "rect-shape",
});
if (cfg.name) {
group.addShape("text", {
attrs: {
text: cfg.name,
x: 0,
y: 0,
fill: "#000",
fontSize: 16,
textAlign: "center",
textBaseline: "middle",
// fontWeight: "bold",
},
name: "text-shape",
});
}
return rect;
},
},
"single-node"
);
const width = document.getElementById("main").scrollWidth;
const height = document.getElementById("main").scrollHeight || 500;
const graph = new G6.Graph({
container: "main",
width,
height,
layout: {
type: "dagre", //布局 默认Random
nodesepFunc: (d) => {
if (d.id === "3") {
return 200; //id为3的间距
}
if (d.id === "7") {
return 200;//id为7的间距
}
return 60;
},
ranksep: 40,
controlPoints: true,
},
defaultNode: {
type: "sql",//默认使用上面设置的类
},
defaultEdge: {
type: "polyline",
style: {
radius: 20,
offset: 45,
endArrow: true,
lineWidth: 2,
stroke: "#C2C8D5",
},
},
nodeStateStyles: {
selected: {
stroke: "#d9d9d9",
fill: "#5394ef",
},
// 鼠标 hover 上节点，即 hover 状态为 true 时的样式
hover: {
fill: "lightsteelblue",
},
},
modes: {
default: [
"drag-canvas",
"zoom-canvas",
"click-select",
"drag-node", //允许拖拽画布，放缩画布、拖拽节点
{
type: "tooltip",
formatText(model) {
const cfg = model.conf;
const text = [];
cfg.forEach((row) => {
text.push(row.label + ":" + row.value + "
");
});
return text.join("\n");
},
offset: 30,
},
],
},
fitView: true,
});
// 鼠标进入节点
graph.on("node:mouseenter", (e) => {
const nodeItem = e.item; // 获取鼠标进入的节点元素对象
graph.setItemState(nodeItem, "hover", true); // 设置当前节点的 hover 状态为 true
});
// 监听鼠标离开节点
graph.on("node:mouseleave", (e) => {
const nodeItem = e.item;
// 设置目标节点的 hover 状态 false
graph.setItemState(nodeItem, "hover", false);
});
graph.data(this.gg);
graph.render();
},
},
};
</script>
<style >
#main {
width: 1000px;
height: 1000px;
}
</style>