效果图
代码块
<template>
<div>
<div :id="id"></div>
</div>
</template>
<script>
import G6 from "@antv/g6";
export default {
name: "g6Node1",
props: ["data", "biaoShiFu", "indexValue"],
data() {
return {
id: "0",
idValue: 0
};
},
watch: {
idValue(newQuestion, oldQuestion) {
console.log(oldQuestion, newQuestion);
// return newQuestion;
}
},
mounted() {
// console.log('id',this.biaoShiFu)
// this.id = this.biaoShiFu['id']
// window.addEventListener('setItemEvent', function(e) {
// const newdata = JSON.parse(e.newValue)
// console.log('值改变了',newdata)
// this.idValue = newdata;
// console.log('_id',this.idValue)
// })
console.log("22222222222222222222", this.indexValue);
this.id = "g6_" + this.indexValue;
this.render();
console.log("id", this.id);
},
methods: {
render() {
// let _this = this;
// window.addEventListener("setItemEvent", function (e) {
// const newdata = JSON.parse(e.newValue);
// console.log("值改变了", newdata);
// this.idValue = newdata;
// console.log("_id", this.idValue);
// if (this.id == 0) {
// let G6Init = {
// // container: 'contentLeftTwo', // 指定图画布的容器 id,与第 9 行的容器对应
// // 画布宽高
// container: '0',
// renderer: "svg",
// width: 800,
// height: 500
// }
// alert(1);
// this.g6Init(G6Init);
// } else if (this.id == 1) {
// // _this.id = "def";
// let G6Init = {
// // container: 'contentLeftTwo', // 指定图画布的容器 id,与第 9 行的容器对应
// // 画布宽高
// container: '1',
// renderer: "svg",
// width: 800,
// height: 500
// }
// this.g6Init(G6Init);
// } else if (this.id == 2) {
// // _this.id = "ghi";
// let G6Init = {
// // container: 'contentLeftTwo', // 指定图画布的容器 id,与第 9 行的容器对应
// // 画布宽高
// container: '2',
// renderer: "svg",
// width: 800,
// height: 500
// }
// this.g6Init(G6Init);
// }
// });
// console.log("idValue", this.idValue);
// console.log("2222id", this.id);
// console.log(_this.biaoShiFu['id'])
setTimeout(() => {
this.g6Init();
}, 1000);
},
g6Init() {
let that = this;
G6.registerNode("dom-node-1", {
draw(cfg, group) {
console.log("cfg", cfg);
return group.addShape("dom", {
attrs: {
width: cfg.size[0],
height: cfg.size[1],
html: `<div>
<div style="height:100%;width:100%;position:relative;margin-bottom:10px;">
<div style=" padding: 4px;width:120px;height:36px;background-color:${
cfg.style.fill
};border-radius:10px;">
<div style="margin-top:-1px;text-align: center;border-radius:10px;border:1px solid #fff;background-color:${
cfg.style.fill
};height:100%;width:100%;">
<div style="text-align:center;">
<div> ${
cfg.id}</div>
<div>${
2}</div>
</div>
</div>
</div>
<div style="width: 38px;
height: 38px;
background-color: #AFD4F7;
border-radius: 50%;
position: absolute;
top: 50%;
right: 0;
margin-top: -22px;
margin-right: 4px;
background-color: #fff;
padding:3px;
">
<div style="margin-top: -2px;margin-left:-2px;width:100%;height:100%;border:2px solid ${
cfg.style.fill
};border-radius: 50%;"&g