效果图
待完善，有思路联系，仅供学习参考
上代码
<template>
<div id="container"></div>
</template>
<script>
import G6 from "@antv/g6";
export default {
data() {
let data = this.topoOptions;
return {
topoOptions: {
nodes: [
{
x: 50,
y: 190,
type: "image",
id: "1",
img: require("../assets/svg/e1.svg"),
size: [60, 30],
label: "avatar",
style: {
cursor: "pointer",
},
labelCfg: {
position: "bottom",
},
},
],
edges: [
// {
// source: "node1",
// target: "node2",
// label: "line",
// labelCfg: {
// refY: 10,
// },
// type: "cubic-horizontal",
// },
],
},
list: {
root: "主设备1-1",
type: 2,
id: 1,
leaf: [
{
root: "主设备2-1",
id: 2,
type: 1,
leaf: [
{
root: "设备5", id: 5, type: 1, leaf: [] },
{
root: "设备6", id: 6, type: 1, leaf: [] },
{
root: "设备7", id: 7, type: 1, leaf: [] },
],
},
{
root: "主设备2-2",
id: 3,
type: 1,
leaf: [
{
root: "设备8", id: 8, type: 1, leaf: [] },
{
root: "设备9", id: 9, type: 1, leaf: [] },
{
root: "设备10", id: 10, type: 1, leaf: [] },
],
},
{
root: "主设备2-3",
id: 4,
type: 1,
leaf: [
{
root: "设备5",
id: 11,
type: 1,
leaf: [
{
root: "设备14", id: 14, type: 1, leaf: [] },
{
root: "设备15", id: 15, type: 1, leaf: [] },
{
root: "设备16", id: 16, type: 1, leaf: [] },
],
},
{
root: "设备6",
id: 12,
type: 1,
leaf: [
{
root: "设备17", id: 17, type: 1, leaf: [] },
{
root: "设备18", id: 18, type: 1, leaf: [] },
{
root: "设备19", id: 19, type: 1, leaf: [] },
],
},
{
root: "设备7",
id: 13,
type: 1,
leaf: [
{
root: "设备20", id: 20, type: 1, leaf: [] },
{
root: "设备21", id: 21, type: 1, leaf: [] },
{
root: "设备22", id: 22, type: 1, leaf: [] },
],
},
],
},
],
},
};
},
mounted() {
this.$nextTick(() => {
this.loding();
});
},
methods: {
gg1(val, x = 200, y = 150, a = 60, b = 30, h = 60) {
val.forEach((item, index) => {
let nodesObj = {
x: x,
y: y,
type: "image",
id: item.id,
img: require("../assets/svg/e2.svg"),
size: [a, b],
label: item.root,
style: {
cursor: "pointer",
},
labelCfg: {
position: "bottom",
},
};
this.topoOptions.nodes.push(nodesObj);
nodesObj = {
};
y += h;
// y = 0;
if (item.leaf !== []) {
this.gg1(item.leaf, x + 100, (y - 200) / 0.5, a / 2, b / 2, h * 0.7);
}
console.log(y);
// console.log(1);
});
},
gg2(val, id = 1) {
val.forEach((item, index) => {
if (id == 1) {
let obj = {
source: id.toString(),
target: item.id.toString(),
label: "line",
labelCfg: {
refY: 10,
},
type: "cubic-horizontal",
};
this.topoOptions.edges.push(obj);
obj = [];
}
item.leaf.forEach((key) => {
let obj = {
source: item.id.toString(),
target: key.id.toString(),
label: "line",
labelCfg: {
refY: 10,
},
type: "cubic-horizontal",
};
this.topoOptions.edges.push(obj);
obj = [];
});
this.gg2(item.leaf, id + 1);
});
},
loding() {
this.topoOptions.nodes[0].label = this.list.root;
this.topoOptions.nodes[0].id = this.list.id;
this.gg1(this.list.leaf);
this.gg2(this.list.leaf, 1);
// this.topoOptions.edges[0];
console.log(this.topoOptions.edges);
// console.log(this.topoOptions.nodes);
console.log(this.topoOptions);
this.topoOptions;
this.g6();
},
g6() {
let img = new Image();
img.src = require("../assets/svg/e1.svg");
// // 点击图片节点，切换背景图片
// let img2 = new Image();
// img2.src = require("../assets/svg/e2.svg");
// let img3 = new Image();
// img3.src = require("../assets/svg/e3.svg");
let data = this.topoOptions;
// 避免拖动过程中闪烁：使用加载已经LOAD好的图片
img.onload = function () {
let container = document.getElementById("container");
let width = container.scrollWidth;
let height = container.scrollHeight || 500;
let graph = new G6.Graph({
container: "container",
width,
height,
defaultNode: {
style: {
fill: "#DEE9FF",
stroke: "#5B8FF9",
},
},
defaultEdge: {
color: "#e2e2e2",
},
modes: {
default: [
"drag-node",
{
type: "drag-node",
},
],
},
});
graph.data(data);
graph.render();
// graph.on("node:click", function (evt) {
// let target = evt.target;
// let type = target.get("type");
// let hasChangeBg = target.get("hasChangeBg");
// if (type === "image") {
// if (!hasChangeBg) {
// // 点击图片节点时，切换背景图片
// target.attr("img", img2);
// target.attr(
// "imgSrc",
// "http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg"
// );
// target.set("hasChangeBg", true);
// } else {
// target.attr("img", img);
// target.attr(
// "imgSrc",
// "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566553535233&di=b0b17eeea7bd7356a6f42ebfd48e9441&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F64%2F29%2F01300543361379145388299988437_s.jpg"
// );
// target.set("hasChangeBg", false);
// }
// graph.paint();
// }
// });
if (typeof window !== "undefined")
window.onresize = () => {
if (!graph || graph.get("destroyed")) return;
if (!container || !container.scrollWidth || !container.scrollHeight)
return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
};
},
},
};
</script>
<style >
#container {
width: 1000px;
height: 1000px;
}
</style>