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

效果：

4c3a619546ae95262e614431c61ffd6.jpg

<div id="main" ref="main" style="width: 80%;height: 800px;padding:30px 100px 30px 30px" />
    <el-card v-for="(item, i) in infoList" :id="u+i" :key="i" class="info">
      <div class="info_flex">
        <el-image
          :src="item.headimgurl"
          fit="fill"
          :preview-src-list="[item.headimgurl]"
          class="info_img"
        />
        <div class="info_flexl info_wid">
          <span>昵称：{{ item.nickname }}</span>
          <span>姓名：{{ item.realname }}</span>
          <span>性别：{{ item.sexs }}</span>
          <span>年龄：{{ item.age }}</span>
        </div>
      </div>
      <div class="info_flexl" style="margin-top: 10px">
        <span>手机号：{{ item.mobile }}</span>
        <span>地区：{{ item.address }}</span>
        <span>团队人数：{{ item.team }}</span>
        <span>升级后团队人数：{{ item.up_team }}</span>
      </div>
    </el-card>

// 加载树图
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)
},

<style lang='scss' scoped>
.info {
  width: 240px;
  display: none;
  position: absolute;
  left: -99999px;
  top: -999999px;
  &_flex {
    display: flex;
    align-items: center;
  }
  &_flexl {
    display: flex;
    flex-direction: column;
  }
  &_img {
    width: 75px;
    height: 75px;
    margin-right: 10px;
    display: inline-block;
  }
  &_wid {
    span {
      display: inline-block;
      width: 135px;
      height: 19px;
      overflow: hidden;
    }
  }
}
</style>