工程现场地图显示修复

src/views/screen/engineering/main.vue

@@ -57,7 +57,7 @@
         height="850px"
         @mapClick="onMapClick"
       ></province>-->
-      <Map @transmit="transmit" v-if="showMap" :list1="list1" :list2="list2"></Map>
+      <Map @transmit="transmit" v-if="showMap" :list1="list1" :list2="list2" ref="map"></Map>
       <div
         v-if="showLocal"
         class="img-area flex-row align-items-center flex-center"
@@ -360,9 +360,12 @@ export default {
     };
   },
   created() {
-    this.getProjectNum();
-    this.getProjectNumX();
-    this.getProjectNumZ()
+    this.$nextTick(() => {
+      this.getProjectNum();
+      this.getProjectNumX();
+      this.getProjectNumZ()
+    });
+
   },
   destroyed() {},
   beforeDestroy() {},
@@ -418,9 +421,9 @@ export default {
     getProjectNumZ() {
       getProjectNumZ(this.mapArr).then((res) => {
         if (Number(res.code) === 200) {
-          const fetchedData = res.data;
           this.list1 = res.data.list1
           this.list2 = res.data.list2
+          this.$refs.map.start();
         }
       });
     },

src/views/screen/map/map.vue

@@ -85,21 +85,22 @@ export default {
     }
   },
   created () {},
-  mounted() {
-    let i = 0
-    for (let it of this.points){
-      it.x = this.list1[i]
-      it.y = this.list2[i]
-      i++
-    }
-    this.$nextTick(() => {
-      imgElement = document.getElementById("mapBackground");
-      setTimeout(() => {
-        this.initCharts();
-      }, 500);
-    });
-  },
+  mounted() {},
   methods: {
+    start(){
+      this.$nextTick(() => {
+        let i = 0
+        for (let it of this.points){
+          it.x = this.list1[i]
+          it.y = this.list2[i]
+          i++
+        }
+        imgElement = document.getElementById("mapBackground");
+        setTimeout(() => {
+          this.initCharts();
+        }, 500);
+      });
+    },
     initCharts() {
       this.charts = echarts.init(this.$refs["charts"]);
       const option = {