解决渲染失败的问题

src/views/AppMap.vue

@@ -64,65 +64,63 @@ export default {
       })
     },
     async initMap() {
-      const {echarts, turf} = window
+      const {echarts, turf, $waitFor} = window
       const boundary = turf.union(this.geoJson)
       boundary.properties.name = "boundary"
       this.geoJson.features.unshift(boundary)
       echarts.registerMap('zhengzhou', this.geoJson)
-      this.map = echarts.init(this.$el)
+      $waitFor(this.$el).then(() => {
-      while (!this.map) {
-        await new Promise(resolve => setTimeout(resolve, 500))
         this.map = echarts.init(this.$el)
-      }
+        const areaColor = {
-      const areaColor = {
+          type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
-        type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
+            {offset: 0, color: 'rgba(61,127,255,0.35)'},
-          {offset: 0, color: 'rgba(61,127,255,0.35)'},
+            {offset: 1, color: '#09E2F8'},
-          {offset: 1, color: '#09E2F8'},
+          ]
-        ]
-      }
-      const label = {
-        show: true,
-        backgroundColor: {type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{offset: 0, color: 'rgba(9,63,107,0.79)'}, {offset: 1, color: 'rgba(13,58,99,0.03)'}]},
-        borderRadius: 2,
-        padding: 8,
-        position: 'right',
-        formatter: (params) => {
-          const {name, value} = params
-          return `{a|${name}\n${this.getContent(value).join("\n")}}`
-        },
-        rich: {
-          a: {color: '#fff', fontSize: 12, lineHeight: 14}
         }
-      }
+        const label = {
-      this.map.setOption({
+          show: true,
-        geo: {
+          backgroundColor: {type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{offset: 0, color: 'rgba(9,63,107,0.79)'}, {offset: 1, color: 'rgba(13,58,99,0.03)'}]},
-          map: 'zhengzhou', roam: true, emphasis: {disabled: true},
+          borderRadius: 2,
-          itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
+          padding: 8,
-          silent: true,
+          position: 'right',
-          label: {show: true, color: '#fff'},
+          formatter: (params) => {
-          regions: [
+            const {name, value} = params
-            {name: "boundary", itemStyle: {areaColor, shadowColor: "#1A80BF", shadowOffsetY: 2}, label: {show: false}}
+            return `{a|${name}\n${this.getContent(value).join("\n")}}`
-          ],
-        },
-        series: [
-          {type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}, label},
-          {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}, label}
-        ],
-        tooltip: {
-          trigger: 'item', formatter: params => {
-            const {name, marker, value} = params
-            return `${marker} ${name}<br/>${this.getContent(value).join("<br/>")}`
           },
-        },
+          rich: {
-      })
+            a: {color: '#fff', fontSize: 12, lineHeight: 14}
-      this.map.on('click', evt => {
+          }
-        const storeCode = evt.data.storeCode
-        if (storeCode) {
-          this.$storeBoard.search.storeCode = storeCode
-          this.$marketBoard.screenId = 'a90522ef-869b-40ea-8542-d1fc9674a1e8'
         }
+        this.map.setOption({
+          geo: {
+            map: 'zhengzhou', roam: true, emphasis: {disabled: true},
+            itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
+            silent: true,
+            label: {show: true, color: '#fff'},
+            regions: [
+              {name: "boundary", itemStyle: {areaColor, shadowColor: "#1A80BF", shadowOffsetY: 2}, label: {show: false}}
+            ],
+          },
+          series: [
+            {type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}, label},
+            {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}, label}
+          ],
+          tooltip: {
+            trigger: 'item', formatter: params => {
+              const {name, marker, value} = params
+              return `${marker} ${name}<br/>${this.getContent(value).join("<br/>")}`
+            },
+          },
+        })
+        this.map.on('click', evt => {
+          const storeCode = evt.data.storeCode
+          if (storeCode) {
+            this.$storeBoard.search.storeCode = storeCode
+            this.$marketBoard.screenId = 'a90522ef-869b-40ea-8542-d1fc9674a1e8'
+          }
+        })
+        this.refreshData()
       })
-      this.refreshData()
     },
     convertData(layers) {
       const result = {normal: [], abnormal: []}