优化地图组件刷新逻辑及初始化处理

src/views/AppMap.vue

@@ -16,17 +16,18 @@ export default {
   watch: {
     search: {
       deep: true, handler() {
-        this.getData().then(() => this.refreshData())
+        this.getData().then(() => this.refreshData("watch search"))
       }
     },
     thirdGoods: {
       deep: true, handler() {
-        this.getData().then(() => this.refreshData())
+        this.getData().then(() => this.refreshData("watch thirdGoods"))
       }
     },
   },
   methods: {
     loadLib() {
+      const {$loadScript} = window
       return Promise.all([
         '/presource/datascreen/js/turf.min.js',
       ].map(e => $loadScript('js', e)))
@@ -63,7 +64,7 @@ export default {
         return this.geoJson = {type: 'FeatureCollection', features: maps.flat(1)}
       })
     },
-    async initMap() {
+    initMap() {
       const {echarts, turf, $waitFor} = window
       const boundary = turf.union(this.geoJson)
       boundary.properties.name = "boundary"
@@ -71,6 +72,7 @@ export default {
       echarts.registerMap('zhengzhou', this.geoJson)
       $waitFor(this.$el).then(() => {
         this.map = echarts.init(this.$el)
+        if (!this.map) return setTimeout(() => this.initMap(), 500)
         const areaColor = {
           type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
             {offset: 0, color: 'rgba(61,127,255,0.35)'},
@@ -119,7 +121,7 @@ export default {
             this.$marketBoard.screenId = 'a90522ef-869b-40ea-8542-d1fc9674a1e8'
           }
         })
-        this.refreshData()
+        this.refreshData("initMap")
       })
     },
     convertData(layers) {
@@ -135,16 +137,16 @@ export default {
       })
       return Object.values(result).map(data => ({data}))
     },
-    refreshData() {
+    refreshData(from) {
+      console.log("refreshData调用位置:", from)
       const {thirdGoods: {goodsName}} = this
       const title = {left: 20, top: 20, text: goodsName ? `{sub|选择产品：}${goodsName}` : '', textStyle: {color: "#fff", rich: {sub: {color: "#fff", fontSize: 16}}}}
-      this.map.setOption({title, series: this.convertData(this.layers)})
+      if (!this.map) return this.initMap()
+      this.map?.setOption({title, series: this.convertData(this.layers)})
     },
   },
   mounted() {
-    this.loadLib().then(() => Promise.all([
-      this.getData(),
-    ])).then(() => this.initMap())
+    this.loadLib().then(() => this.getData()).then(() => this.initMap())
   }
 }
 </script>