解决渲染失败的问题

src/views/AppMap.vue

@@ -64,16 +64,13 @@ 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)
+      $waitFor(this.$el).then(() => {
         this.map = echarts.init(this.$el)
-      while (!this.map) {
-        await new Promise(resolve => setTimeout(resolve, 500))
-        this.map = echarts.init(this.$el)
-      }
         const areaColor = {
           type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
             {offset: 0, color: 'rgba(61,127,255,0.35)'},
@@ -123,6 +120,7 @@ export default {
           }
         })
         this.refreshData()
+      })
     },
     convertData(layers) {
       const result = {normal: [], abnormal: []}