画布 Graph antv-x6在vue中的使用，graph函数动态添加节点和边

参考antv-x6官网： 画布 Graph

参考官网： 图表案例

1. 实现效果图
   

2. 请求后端返回的数据格式(json)：

{
    "data": {
        "nodes": [
            {
                "id": "00001022",
                "name": "xxxxxxx公共服务"
            },
            {
                "id": "00002001",
                "name": "xxxx服务后台"
            },
            {
                "id": "00001047",
                "name": "xxxx支撑服务"
            }
        ],
        "lines": [
            {
                "source": "00002001",
                "target": "00001022",
                "type": "接口关系",
                "weight": 1
            },
            {
                "source": "00001047",
                "target": "00001022",
                "type": "接口关系",
                "weight": 1
            }
        ]
    },
    "code": 20000
}

3. vue代码实现

methods: {
	  getRelation(appid,level) {
	    getappRelation({'app_id': appid,'level':level}).then(response => {
	      //console.log(response.data)
        this.initmap(response.data)		  
	    })      
	  },
    initposition(sum){

    },
    initmap(app_data){
      this.initposition(app_data.length)
      var graph = new Graph({
        container: document.getElementById('my_map'),
        grid: true,
        panning: {enabled: true}
      })
      this.addNode(graph,app_data.nodes[0],0,50,300)
      for (let i = 1; i< app_data.nodes.length; i++) {
        this.addNode(graph,app_data.nodes[i],1,this.getposx(app_data.nodes.length - 1,i - 1),this.getposy(app_data.nodes.length - 1,i - 1))
      }
      for (let i = 0; i< app_data.lines.length; i++) {
        this.addLine(graph,app_data.lines[i])
      }
    },
    getposx(sum,num){
      const lines = parseInt( num  / 8)
      return lines*250 + 400
    },
    getposy(sum,num){
      //console.log('sum:' + sum + ' num:' + num)
      const lines = parseInt( num / 8)
      const pos = num  % 8
      //console.log('lines:' + lines + ' pos:' + pos)
      if (lines == parseInt( sum /8)){
        const allpos = sum % 8
        //console.log('allpos:' + allpos + ' return:' + (pos+1) * 720 / allpos)
        return (pos+1) * 720 / (allpos + 1)
      } else {
        return (pos+1) *90
      }
    },
    addNode(graph,node,type,x,y){
      
      //console.log('add node' + node.name + ' x:' + x +  ' y:' + y)
      const wrap = document.createElement('div')
      wrap.style.width = '100%'
      wrap.style.height = '100%'
      wrap.style.display = 'flex'
      wrap.style.alignItems = 'center'
      wrap.style.justifyContent = 'center'
      wrap.style.textAlign = 'center'
      wrap.style.borderRadius = '4px'
      wrap.style.margin = '0 auto'

      wrap.innerText = node.name
      if (type == 1) {
          wrap.style.background = 'yellow'
        wrap.style.border = '2px solid #ffa940'

        }else{
        wrap.style.background = '#f64040'
        wrap.style.border = '2px solid #ffa940'

      }
      const target = graph.addNode({
        shape: 'html',
        x: x,
        y: y,
        width: 150,
        height: 60,
        html: wrap,
      })
      this.map_data[node.id] = target
      //console.log('node info ' + node.id + ' ' + this.map_data[node.id])
      return target
    },
    addLine(graph, line){
      //console.log('add line ' + line.source + ' ' + line.target)
      const fromnode = this.map_data[line.source]
      const tonode = this.map_data[line.target]
      
      let marker1 = 'classic'
      let marker2 = 'circle'
      if (line.type=='变更订阅'){
        marker1 = 'classic'
        marker2 = 'diamond'
      } else if (line.type=='消息队列订阅'){
        marker1 = 'classic'
        marker2 = 'circlePlus'
      }
      graph.addEdge(new Shape.Edge(
        {
          source:fromnode,
          target:tonode,
          router: 'manhattan',
          connector: {
            name: 'rounded',
            args: {
              radius: 20,
            },
          },  
          attrs: {
            line: {
              targetMarker: {
                size: 10,
                name: marker1,
              },
              sourceMarker: {
                size: 4,
                name: marker2,
              },
              stroke: '#46AD4d',
              strokeWidth: line.weight/3+1,
            },
          },
        }))
    }
  }