vue+echarts 實現map3D地圖tooltip彈框讀取后台返回的數據,並顯示彈框

直接說結論：把后台接口返回的數據放到map3D的data里，然后在tootip的formatter函數里,

通過params.data來獲取后台接口返回的數據，通過字符串拼接並return。點擊地圖區域彈框就能顯示

之前是在formatter函數里調用 that.getTooltip(), gettooltip()是寫在methods里的一個獲取后台接口數據的方法，實踐證明不行，

需要點擊地圖區域兩次才展示彈框內容，原因是在點擊的時候先執行了formatter里渲染html的代碼，后執行的接口調用的axiso

請求，這就導致第一次點擊的時候獲取的內容是空的，一直在糾結異步問題，查找了很多async await 相關的文章，受這篇博文

啟發tooltip.formatter，后來改進如文章開頭所述，廢話不多說，上圖：

控制台打印截圖，console.log(params)：

  全局tooltip核心代碼：

       tooltip: {
                        trigger: "item",
                        axisPointer: {
                          type: "none",
                          textStyle: {
                              color: "#fff"
                          }
                        },
                        // confine:true, //是否將 tooltip 框限制在圖表的區域內  
                        triggerOn : 'click',//提示框觸發的條件 
                        transitionDuration :.8,//提示框浮層的移動動畫過渡時間，單位是 s                  
                        backgroundColor:'#09455c',
                        // position: function (pos, params, el, elRect, size) {
                        //     var obj = {top: 10};
                        //     obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                        //     return obj;
                        // },
                        position: function (point,params,dom,rect,size){
                          // 鼠標坐標和提示框位置的參考坐標系是：以外層div的左上角那一點為原點，x軸向右，y軸向下
                          // 提示框位置
                          var x = 0;//x坐標位置
                          var y = 0; //y坐標位置
                          // 當前鼠標位置
                          var pointX = point[0];
                          var pointY = point[1];
                          // 提示框大小
                          var boxWidth = size.contentSize[0];
                          var boxHeight = size.contentSize[1];
                          // boxWidth > pointX說明鼠標左邊放不下提示框
                          if(boxWidth > pointX){
                            x = pointX;
                          }else{  // x軸為當前鼠標位置在加20
                            x = pointX + 20;
                          }
                          //boxHeight > pointY說明鼠標上邊放不下提示框
                          if(boxHeight > pointY){
                            y = 5;
                          }else{ //上邊放的下
                            y = pointY - boxHeight;
                          }
                          return [x,y];
                        },
                        formatter: function(params,ticket,callback) {
                          console.log(params)                         
                          let areaName = params.data.name;  
                          let toolData ={};  
                          let webData = {}; 
                          let tooltipContent = '';//xx內容
                          let toolWebContent =''; //yy內容                         
                          if (params.data) {
                            if(params.data.tool){
                               toolData = params.data.tool.districtItemRank;//xx數據
　　　　　　　　　　　　　　 webData = params.data.tool.districtOrgRank;//yy數據 
                                  // tooltip formatter渲染自定義組件容器                             
                                  // 遍歷toolData xx數據
                                  if(toolData != undefined && toolData.length>0){ 
                                    for(let i = 0;i<toolData.length;i++){
                                      tooltipContent += `
                                        <li>
                                          <span class='${toolData[i].rank}'>${i+1}</span>
                                          <span>${toolData[i].itemName}</span>
                                          <span>${toolData[i].districtItemCount}</span>
                                        </li>`;
                                    }
                                  }                              
                                  //遍歷webData yy數據
                                  if(webData != undefined && webData.length>0){
                                    for(let j = 0;j<webData.length;j++){
                                      toolWebContent += `
                                        <li>
                                          <span class='${toolData[j].rank}'>${j+1}</span>
                                          <span>${webData[j].orgName}</span>
                                          <span>${webData[j].districtOrgCount}</span>
                                        </li>`;
                                    }
                                  }                                
                            }
                            return `
                                    <ul id='tool_alert'>
                                      <li>${params.name}(${params.value})</li>
                                      <li class='tool_tit'>xx辦理排行<i class='font_orange'>TOP10</i></li>
                                      ${tooltipContent}
                                      <li class='tool_tit'>yy辦理排行<i class='font_orange'>TOP5</i></li>
                                      ${toolWebContent}
                                    </ul>`;
                          };
                        },
                    },