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,6 +116,7 @@ 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)
@@ -160,6 +150,9 @@ export default {
               })
               this.loadMarkerData(imageSeries, mapData)
             })
+          } else {
+            imageSeries.data = [{}]
+          }
         }).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)
       }
     },