fix: 修复地图下钻后切换方向可能出错的问题

src/views/charts2/charts/npm/NpmMap.vue

@@ -63,9 +63,9 @@ export default {
       locationOptions,
       myChart: null,
       polygonSeries: null,
-      countrySeries: [],
+      countrySeries: null,
       worldImageSeries: null,
-      countryImageSeries: [],
+      countryImageSeries: null,
       // Server | Client
       trafficDirection: 'Server',
       location: ''
@@ -94,24 +94,13 @@ export default {
       this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
         this.$store.commit('setNpmLocationCountry', ev.target.dataItem.dataContext.name)
         this.location = ev.target.dataItem.dataContext.name
-        this.cleanCountry()
         const countryId = ev.target.dataItem.dataContext.id
         ev.target.isHover = false
         await this.drill(countryId)
       })
     },
-    cleanCountry () {
-      this.countrySeries.forEach(s => {
-        s.value.dispose()
-      })
-      this.countryImageSeries.forEach(s => {
-        s.value.dispose()
-      })
-    },
     loadAm4ChartMap (polygonSeries, imageSeries) {
       try {
-        // 清除数据
-        // polygonSeries.data.splice(0)
         this.toggleLoading(true)
         // 清除legend
         this.myChart.children.each((s, i) => {
@@ -127,39 +116,43 @@ export default {
           country: this.location
         }
         getData(api.npm.location.map, params).then(res => {
-          // 计算分数
+          if (res.length > 0) {
-          const tcpRequest = get(api.npm.location.mapTcp, params)
+            // 计算分数
-          const httpRequest = get(api.npm.location.mapHttp, params)
+            const tcpRequest = get(api.npm.location.mapTcp, params)
-          const sslRequest = get(api.npm.location.mapSsl, params)
+            const httpRequest = get(api.npm.location.mapHttp, params)
-          const tcpLostRequest = get(api.npm.location.mapPacketLoss, params)
+            const sslRequest = get(api.npm.location.mapSsl, params)
-          const packetRetransRequest = get(api.npm.location.mapPacketRetrans, params)
+            const tcpLostRequest = get(api.npm.location.mapPacketLoss, params)
-          Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
+            const packetRetransRequest = get(api.npm.location.mapPacketRetrans, params)
-            const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
+            Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
-            const mapData = res
+              const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
-            res2.forEach((r, i) => {
+              const mapData = res
-              if (r.code === 200) {
+              res2.forEach((r, i) => {
-                mapData.forEach(t => {
+                if (r.code === 200) {
-                  let score = 0
+                  mapData.forEach(t => {
-                  const find = r.data.result.find(d => d.country === t.country)
+                    let score = 0
-                  if (find) {
+                    const find = r.data.result.find(d => d.country === t.country)
-                    score = computeScore(find, i)
+                    if (find) {
-                  }
+                      score = computeScore(find, i)
-                  t[keyPre[i] + 'Score'] = score
+                    }
-                })
+                    t[keyPre[i] + 'Score'] = score
-              } else {
+                  })
-                mapData.forEach(t => {
+                } else {
-                  t[keyPre[i] + 'Score'] = 0
+                  mapData.forEach(t => {
-                })
+                    t[keyPre[i] + 'Score'] = 0
-              }
+                  })
+                }
+              })
+              mapData.forEach(t => {
+                t.score = Math.ceil((t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6)
+                if (t.score > 6) {
+                  t.score = 6
+                }
+              })
+              this.loadMarkerData(imageSeries, mapData)
             })
-            mapData.forEach(t => {
+          } else {
-              t.score = Math.ceil((t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6)
+            imageSeries.data = [{}]
-              if (t.score > 6) {
+          }
-                t.score = 6
-              }
-            })
-            this.loadMarkerData(imageSeries, mapData)
-          })
         }).finally(() => {
           this.toggleLoading(false)
         })
@@ -270,15 +263,19 @@ export default {
         targetMapObject.series.chart.zoomToMapObject(targetMapObject)
         const geoData = await getGeoData(countryId)
         if (geoData) {
-          const countrySeries = shallowRef(this.polygonSeriesFactory())
+          if (!this.countrySeries) {
-          countrySeries.value.geodata = geoData
+            this.countrySeries = this.polygonSeriesFactory()
-          const countryImageSeries = shallowRef(this.imageSeriesFactory('score', countrySeries.value))
+          }
-          this.countrySeries.push(countrySeries)
+          if (!this.countryImageSeries) {
-          this.countryImageSeries.push(countryImageSeries)
+            this.countryImageSeries = this.imageSeriesFactory('score', this.countrySeries)
+          }
+          this.countrySeries.show()
+          this.countryImageSeries.show()
+          this.countrySeries.geodata = geoData
           this.polygonSeries.hide()
           this.worldImageSeries.hide()
           this.$nextTick(() => {
-            this.loadAm4ChartMap(countrySeries.value, countryImageSeries.value)
+            this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
           })
         }
       }
@@ -295,13 +292,14 @@ export default {
     },
     async location (n) {
       this.$store.commit('setNpmLocationCountry', n)
-      this.cleanCountry()
       if (n) {
         const countryId = countryNameIdMapping[n]
         await this.drill(countryId)
       } else {
         this.polygonSeries.show()
         this.worldImageSeries.show()
+        this.countrySeries.hide()
+        this.countryImageSeries.hide()
         this.myChart.zoomToGeoPoint(this.myChart.homeGeoPoint, this.myChart.homeZoomLevel, true)
       }
     },