使用G6 （“antv/g6”: “^4.1.4”,）完成拓扑图 ，高亮显示，新增节点 ，重新渲染，销毁画布

<template>
  <div>
    <div class="box">
      <button type="text" @click="add">新增</button>
      <div id="dd"></div>
    </div>
  </div>
</template>
<script>
import G6 from "@antv/g6";
let textColor = "#59FDFC";
export default {
  data() {
    return {
      i: 4,
      len: 40,
      devicetopologyChart: "",
      deviceTopologyData: {
        id: "工业系统",
        children: [
          {
            id: "工厂1",
            children: [
              { id: "产线1", value: "1" },
              { id: "产线2", value: "2" },
              { id: "产线3", value: "3" },
            ],
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    add() {
      let obj = {
        id: "产线" + this.i,
        value: "1维稳任务而",
      };
      this.i++;
      // 销毁画布
      this.devicetopologyChart.destroy();
      this.deviceTopologyData.children[0].children.push(obj);
      // 重新渲染
      this.deviceInitTopology("dd");
    },
    deviceInitTopology(val) {
      let dataID = [];
      // 获取渲染数据
      let data = this.deviceTopologyData;
      const width = document.getElementById(val).scrollWidth;
      const height = document.getElementById(val).scrollHeight || 500;
      const graph = new G6.TreeGraph({
        container: val,
        width,
        height,
        modes: {
          default: [
            {
              type: "collapse-expand",
              onChange: function onChange(item, collapsed) {
                const data = item.get("model");
                data.collapsed = collapsed;
                return true;
              },
            },
            // 'drag-canvas',
            "zoom-canvas",
          ],
        },
        defaultNode: {
          size: 26,
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
          style: {
            fill: "#696969",
            stroke: "#5B8FF9",
          },
        },
        defaultEdge: {
          type: "cubic-horizontal",
          style: {
            stroke: "#A3B1BF",
          },
        },
        nodeStateStyles: {
          selected: {
            fill: textColor,
          },
          online: {
            fill: "#00FF00",
          },
          alarm: {
            fill: "#FF0000",
          },
          warn: {
            fill: "#FFFF00",
          },
        },
        layout: {
          type: "mindmap",
          direction: "H",
          getId: function getId(d) {
            return d.id;
          },
          getHeight: function getHeight() {
            return 16;
          },
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: function getVGap() {
            return 12;
          },
          getHGap: function getHGap() {
            return 50;
          },
          getSide: () => {
            // 子节点往右边对齐
            return "right";
          },
        },
      });
      graph.node(function (node) {
        return {
          label: node.id,
          labelCfg: {
            offset: 10,
            position:
              node.children && node.children.length > 0 ? "left" : "right",
            style: {
              fill: textColor,
            },
          },
        };
      });

      graph.on("node:click", function (event) {
                const { item } = event;
                dataID.push(item._cfg.id)
                graph.setItemState(dataID.slice(-2)[0], "alarm", false);
                graph.setItemState(item._cfg.id, "alarm", true);
      });
      this.devicetopologyChart = graph;
      // data是渲染数据
      graph.data(data);
      graph.render();
      graph.fitView();
      // 让产线3一直为online这个颜色
      this.colorChange();
    },
    colorChange() {
      this.devicetopologyChart.setItemState("产线3", "online", true);
    },
  },
  mounted() {
    this.deviceInitTopology("dd");
  },
};
</script>

<style>
#dd {
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
.box {
  width: 500px;
  height: auto;
  margin: 0 auto;
}
</style>