使用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 + "<br>");
});
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/16760.html
標籤：java
上一篇：java如何禁止拋出例外資訊？
下一篇：Js中的作用域和作用域鏈