echarts 树图 右键操作，多个节点展示详情框

效果：

4c3a619546ae95262e614431c61ffd6.jpg

    
      

        
        

          昵称：{{ item.nickname }}
          姓名：{{ item.realname }}
          性别：{{ item.sexs }}
          年龄：{{ item.age }}
        
      
      

        手机号：{{ item.mobile }}
        地区：{{ item.address }}
        团队人数：{{ item.team }}
        升级后团队人数：{{ item.up_team }}
      
    

// 加载树图
drewTree(a) {
  const myChart = echarts.init(document.getElementById('main'))
  myChart.setOption({
      tooltip:[],
      series:[]
  })
  // 阻止右键默认的菜单弹出
  document.oncontextmenu = function(param) {
    return false
  }
if (a) { // 存在右键点击
    this.$nextTick(() => {
       that.infoList.forEach((v, i, arr) => {
          const model = myChart.getModel().getSeriesByIndex(0).getData()._itemLayouts // 树形图所有节点坐标
            const info = document.getElementById('data' + i)
            info.style.display = 'block'
            info.style.left = model[v.l + 1].x + 10 + 'px'
            console.log(model[v.l + 1].y)
            if (model[v.l + 1].y < 150) {  // 节点位置太靠上，详情框显示不出来，定位到节点下方
              info.style.top = model[v.l + 1].y + 190 + 'px'
            } else {
              info.style.top = model[v.l + 1].y - 190 + 'px'
            }
         })
     })
  }
  myChart.on('contextmenu', this.rightClick) // 右键事件
},
// 右键事件
rightClick(param) {
  console.log(param) // 获取节点参数
const list = this.getParentId(this.datas, param.data.id)
      const arr = []
      list.forEach((item) => {
        if (item.name !== 'xx关系') {
          arr.push(Object.assign({}, { id: item.id, status: item.id !== param.data.id ? item.status : item.status ? 0 : 1 }))
        }
      })
      const that = this
      const myChart = echarts.init(document.getElementById('main'))
      axios
        .get('xxxxx', {
          params: {
            id: param.data.id,
            arr: arr.reverse()
          }})
        .then(res => {
          this.datas = [
            {
              'name': 'xx关系图',
              'id': 1,
              'children': eachKeyed(res.data.data.data)
            }
          ]
          myChart.clear()
          that.infoList = res.data.data.info[1]
          that.drewTree(that.datas, param.data.name, 1)
},