Antv G6 画电网线路图

Antv G6 画电网电器拓扑图

为电网系统服务难免遇到电路图，电气图。然而很少有开源系统可以很好的满足我的需求，不得已寻找最佳解决方法。而然间发现Antv G6 这个图可视化引擎可以经过数据方面的相应适配完成画电器拓扑图的基本需求。

话不多说先上效果图

1.无端点母线 可以自行添加节点（节点无限小不可见）作为母线的端点
2.图中的110kV变 也是使用了无限小的节点对应一个label文本

vue代码 与 数据文件如下

1.vue

点击查看代码

<template>
  <div class="content">
    <div id="mountNode"></div>
    <div id="minimapDiv" class="minimapDivCon"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
import data from '@/assets/G6Testdata.json'
export default {
  data() {
    return {
      data: null,
      graph: null,
    }
  },
  mounted() {
    this.data = JSON.parse(data)
    const minimap = new G6.Minimap({
      container: document.getElementById('minimapDiv'),
      size: [160, 120],
    })
    this.graph = new G6.Graph({
      modes: {
        default: ['drag-canvas', 'scroll-canvas', 'drag-node'],
      },
      defaultEdge: {
        type: 'polyline',
        // 其他配置
      },
      plugins: [minimap],
      container: 'mountNode',
      width: 800,
      height: 700,
      fitView: true,
      fitViewPadding: [20, 40, 50, 20],
      layout: {
        // type: 'dagre',
        begin: [0, 0],
        rankdir: 'LR',
        align: 'DL',
        // preventOverlapPadding: 10,
      },
      defaultNode: {
        size: 30,
        labelCfg: {
          position: 'top',
          style: {
            fill: '#fff',
            textAlign: 'center',
            fontStyle: 'normal',
          },
        },
        style: {
          cursor: 'default',
        },
      },
      defaultEdge: {
        labelCfg: {
          autoRotate: true,
        },
      },
    })
    this.render()
  },
  methods: {
    render() {
      // 读取数据
      this.graph.data(this.data)
      // 渲染图
      this.graph.render()
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 800px;
  height: 700px;
  #mountNode {
    border: 1px solid #ccc;
    width: 800px;
    height: 700px;
  }
  #minimapDiv {
    border: 1px solid #ccc;
    width: 160px;
    height: 120px;
    position: absolute;
    bottom: 5px;
    right: 5px;
  }
}
</style>

2.data.json
data.json