Vue使用echarts雷达图自定义弹窗页

前提：如果雷达图出现多选的情况，鼠标放上去雷达图的每个拐角处时要展示选到的所有主体的该属性的值，维度是从每个拐角处出发。
默认弹窗和自定义弹窗区别：
原来：

目标：

HTML部分
<div class="label-tooltip" ref="LabelToolTip">
  <div class="tooltip-title">{{ indicatorName }}</div>
  <div class="tooltip-content">
    <div class="pt5" v-if="indicatorName">
      <div class="item" v-for="(x, i) in normalList" :key="i">
        {{ x.name }}：{{ x.value ? x.value : 0 }}
      </div>
    </div>
  </div>
</div>

methods方法部分
getBaseLine() {
   let that = this;
   echarts.init(that.$refs.myChart).dispose(); // 销毁
   var myChart = echarts.init(that.$refs.myChart);
   let option = {
     tooltip:{},
     legend: {
       data: [],
       orient: "vertical",
       x: "right",
       // y: "bottom",
     },
     radar: {
       axisLabel: { show: false },//是否展示刻度
       triggerEvent: true, 
       indicator: [],//动态赋值，结构一般是[{name:"拐点名称1",max:100}, ...]
       axisName: {
         color: "#303133",
       },
     },
     series: [
       {
         type: "radar",
         emphasis: {
           lineStyle: {
             width: 1,
           },
         },
         data: [],//动态赋值，主体数据结构一般是[{value: [4200, 3000, 16000], name: "主体1"}, ...], 里面的value个数对应indicator数组长度
       },
     ],
   }
   myChart.setOption(option);//可以将option定义为全局变量，这里是局部变量比价局限

   //设置鼠标事件
   myChart.on("mouseover", function (params) {
     if (params.componentSubType === "radar") {
       that.$refs.LabelToolTip.style.visibility = "visible";
       const h = that.$refs.LabelToolTip.offsetHeight;
       that.labelName = params.name;
       //是否鼠标在拐点处
       that.indicatorName =
         Number(params.event.topTarget.__dimIdx) >= 0
           ? that.indicatorList[params.event.topTarget.__dimIdx].name
           : "";
       //找到labelName对应的index，找出所有城市该指标值放入normalList
       let index = that.indicatorList.findIndex((el) => {
         return el.name === that.indicatorName;
       });
       that.normalList = [];
       that.abcdList.forEach((p) => {
         that.normalList.push({
           name: p.name,
           value: p.value[index],
         });
       });
       that.normalList = that.uniqueObj(that.normalList);
       that.$refs.LabelToolTip.style.top = `${
         params.event.offsetY + 15 - h
       }px`;
       that.$refs.LabelToolTip.style.left = `${params.event.offsetX + 15}px`;
     }
   });
   myChart.on("mousemove", function(params){
     // that.LabelToolTip = true;
     // debugger
     if(params.componentSubType === 'radar'){
       that.$refs.LabelToolTip.style.visibility = "visible";
       const h = that.$refs.LabelToolTip.offsetHeight;
       that.labelName = params.name
       that.indicatorName = (Number(params.event.topTarget.__dimIdx) >= 0) ? that.indicatorList[params.event.topTarget.__dimIdx].name : "";
       // let self = this;
       // let val = that.indicatorName;
       //找到labelName对应的index，找出所有主体该指标值放入normalList
       let index = that.indicatorList.findIndex((el) => {
         return el.name === that.indicatorName
       })
       that.normalList = []
       // debugger
       that.abcdList.forEach(p=>{
         that.normalList.push({
           name:p.name,
           value:p.value[index]
         })
         // debugger
       });
       that.$refs.LabelToolTip.style.top = `${params.event.offsetY + 15 - h}px`;
       that.$refs.LabelToolTip.style.left = `${params.event.offsetX + 15 }px`;
     }
   });
   myChart.on("mouseout", function (params) {
     console.log(params)
     that.$refs.LabelToolTip.style.visibility = "hidden";
   });
 }