vue+G6 完成拓扑图，高亮显示，新增节点，重新渲染，销毁画布

置顶前端菜鸟日常

于 2020-10-16 14:43:20 发布

阅读量9.2k

点赞数 6

分类专栏： demo antv 可视化文章标签： vue

本文链接：https://blog.csdn.net/weixin_46476460/article/details/109116232

版权

demo 同时被 2 个专栏收录

20 篇文章 5 订阅

订阅专栏

antv 可视化

6 篇文章 1 订阅

订阅专栏

本文展示了如何利用G6库创建拓扑图，包括高亮显示、新增节点、重新渲染和销毁画布的功能。通过点击按钮，可以动态添加新的节点到拓扑图中，并即时更新显示。同时，文章还提供了代码示例，详细说明了每个关键步骤的实现方法。

摘要由CSDN通过智能技术生成

使用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>