ant V G6自定义树图实现动态加载数据

G6官网： 

ps://g6.antv.antgroup.com/exampleshttps://g6.antv.antgroup.com/examples

什么是G6

        G6是一款基于JavaScript的图形可视化引擎，由阿里巴巴集团开发和维护。它提供了丰富的图形绘制、布局和交互功能，用于构建各种类型的图形化应用，包括流程图、关系图、组织结构图等。

G6的主要优势包括

1. 强大的图形绘制能力：G6提供了丰富的图形绘制功能，支持绘制各种形状的节点和边，以及自定义样式和标签。

2. 灵活的布局算法：G6内置了多种常用的布局算法，如树形布局、力导向布局、圆形布局等，可以帮助用户自动排列和调整图形元素的位置。

3. 交互丰富：G6支持多种交互方式，包括拖拽、缩放、平移、选中、连线等，用户可以通过交互操作来编辑和探索图形。

4. 扩展性强：G6提供了丰富的扩展机制，用户可以根据自己的需求自定义节点、边、布局、交互等，以满足特定的应用场景。

5. 跨平台支持：G6可以在浏览器和Node.js环境下运行，支持主流的桌面和移动设备，可以方便地集成到各种前端框架和项目中。

总之，G6是一个功能强大、灵活易用的图形可视化引擎，适用于构建各种图形化应用，并且具有良好的扩展性和跨平台支持。

业务需求，点击二级再调用接口获取后面的数据进行渲染。

业务要求

        使用G6实现拓扑图，需要先加载前面的一二级，点击二级节点动态加载数据，绘制树图。鼠标悬浮展示节点对应的详情信息。

图片展示

代码实现

<template>
  <div class="container">
    <div id="treeContainer" />
  </div>
</template>

<script>
import { getG6Cdn, uniqueId } from '@/utils/utils'
import { drawShape } from './registerNode'
export default {
  name: 'ApprovalList',
  components: {},
  data() {
    return {
      mediaMap: {},
      treeContainer: null,
      graph: null,
      trackParams: {
        userId: 0,
        distinctId: '',
        deviceId: '',
        promoteAssets: ''
      },
      list: {
        nodeName: '用户',
        nodeType: 'tree-node',
        id: uniqueId(),
        children: []
      }
    }
  },
  async mounted() {
    await this.getMediaMap()
    await this.initDate()
    getG6Cdn().then(() => {
      this.treeContainer = document.querySelector('#treeContainer')
      this.initG6()
      this.render()
    })
  },
  methods: {
    //不需要管，这里是业务需要的第五级所对应的数据
    async getMediaMap() {
      await this.$axios
        .post(this.$transformUrl('/media/get_details_list'), { id: '' })
        .then((res) => {
          res.data.forEach((media) => {
            delete media.configList
            this.mediaMap[media.id] = media
          })
        })
    },
    //初始化数据，加载第二层数据
    async initDate() {
      this.initList = Object.assign({}, this.list)
      Object.assign(this.trackParams, this.$route.query)
      await this.$axios
        .post(
          this.$transformUrl('/xxx'),
          this.trackParams
        )
        .then((res) => {
          this.initList.children = res.data.map((item) => {
            return {
              nodeName: item,
              id: uniqueId(),
              nodeType: 'class1'
            }
          })
        })
    },
    initG6() {
      // treeNode类型节点
      G6.registerNode('tree-node', { drawShape: drawShape }, 'single-node')
      const width = this.treeContainer.scrollWidth
      const height = this.treeContainer.scrollHeight || 800
      //设置提示框
      //G6设置提示框官网链接https://g6.antv.antgroup.com/zh/examples/tool/tooltip/#tooltipPluginLocal
      const tooltip = new G6.Tooltip({
        getContent(e) {
          const detail = e.item.getModel().extraData || {}
          const outDiv = document.createElement('div')
          outDiv.style.width = '180px'
  //这里循环遍历展示对象（注意是写原生，之前有点迷糊，在里面写了v-for和v-if
          outDiv.innerHTML = `
      <h4 class="db-title" >详情</h4>
        <div class="content">
             ${Object.keys(detail)
    .map((key) => `<p>${key}: ${detail[key]}</p>`)
    .join('')}
        </div>`
          return outDiv
        },
        shouldBegin: (e) => {
          return (
            e.item.getModel().extraData ||
            Object.keys(e.item.getModel().extraData || {}).length
          )
        },
        itemTypes: ['node']
      })
      this.graph = new G6.TreeGraph({