VUE中 用AntV G6 + element 实现关系图展示

1.效果图 (我的需求是做字段血缘展示)

2.官方文档 ：https://antv-g6.gitee.io/zh/examples/tree/mindmap#hCustomSideMindmap

3.

3.1

npm install @antv/g6 --save

3.2

 <div id="mountNode" ></div>

3.3 method

initG6() {
      console.log(this.data)
      const nodes = this.data.nodes
      // 创建 G6 图实例

      this.graph = new G6.Graph({
        container: 'mountNode',  // 画布容器id
        width: 1400,  // 画布宽度
        height: 1000,    // 画布高度
        modes: {
          default: ['drag-canvas', 'click-select']
        },
        layout: {
          type: 'mindmap',
          direction: 'H',
          align: 'UL',
          nodesep: 50,
          ranksep: 50,  //层次距离
          controlPoints: true,
        },
        //默认节点样式设置
        defaultNode: {
          size: [150, 50],
          type: 'rect',
          color: "#ffffff",
          style: {
            lineWidth: 2,
            stroke: '#5B8FF9',
            fill: '#C6E5FF',
            radius: 5
          },
          labelCfg: {
            style: {
              fontSize: 12,
            },
          },
        },
        // 默认的边样式设置
        defaultEdge: {
          type: 'polyline',
          size: 1,
          color: '#c8c8c8',
          style: {
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#c8c8c8',
            },
            radius: 5,
          },
        },
      })
      this.chart = this.graph
      this.graph.data(this.data)  // 读取数据
      this.graph.render()  // 渲染数据
      this.graph.on('click', (ev) => {  // 监听节点点击事件
        this.evt = ev.item
        const shape = ev.target;
        if (ev.item) {
          const item = ev.item;
          const type = item.getType();
          // console.log('点击节点shape,item,type',shape,item,type)
          this.selectedItem = ev.item._cfg.model
          console.log('treecomplex click 当前节点信息', this.selectedItem)
        }
      });
      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!this.graph || this.graph.get('destroyed')) return;
          if (!mountNode || !mountNode.scrollWidth || !mountNode.scrollHeight) return;
          this.graph.changeSize(mountNode.scrollWidth, mountNode.scrollHeight);
        };
    },

3.4

  mounted() {
    this.initG6();

  }

3.5  销毁画布  定义 chart

    // 避免多次渲染数据 销毁画布
      if (this.chart !== '') {
        this.chart.destroy()
      }

3.6 针对我的需求 设计

 

 写了一个血缘的按钮 ，点击后 血缘关系在对话框 el-dialog 上弹框展示

 点击后的方法：

    handleBlood(data) {
      this.bloodVisible = true;
      // 避免多次渲染数据 销毁画布
      if (this.chart !== '') {
        this.chart.destroy()
      }
      getColumnLineage({id: data.id}).then(res => {
        this.data = res.result;
        this.initG6()
      })
    },

getColumnLineage 是请求后端的接口，我的血缘关系是根据不同入参动态展示的，所以data信息就不给大家粘贴啦

有人问数据结构，我把接口的返回值粘在着了，可以参考，这个xy位置、style都是后端计算好返回的