update

src/components/chinaMap/chinaMap.vue

@@ -68,8 +68,8 @@
             <div class="china-map-container"></div>
 
             <div class="map-legend">
-                <div class="legend-item" v-for="(item,i) in legendList" :key="i">
-                    <div><img class="legend-img" :src="item.img" alt=""> {{ item.text }}</div>
+                <div v-for="(item,i) in legendList" :key="i" class="legend-item">
+                    <div><img :src="item.img" alt="" class="legend-img"> {{ item.text }}</div>
                 </div>
             </div>
         </div>
@@ -193,20 +193,19 @@ function changeTab(i) {
         item.isChecked = false
         return item
     })
-    myChart.value.setOption({});
-    initMap()
+    let myChart = echarts.init(document.querySelector('.china-map-container'));
+    initMap(myChart)
 
 }
 
-let myChart = ref(null)
 onMounted(() => {
     console.log('reload')
-    myChart.value = echarts.init(document.querySelector('.china-map-container'));
+    let myChart = echarts.init(document.querySelector('.china-map-container'));
     echarts.registerMap('china', mapJson);
-    initMap();
+    initMap(myChart);
 })
 
-function initMap() {
+function initMap(myChart) {
     let option = {
         tooltip: {
             show: false,
@@ -286,8 +285,8 @@ function initMap() {
         ],
     };
     // myChart.value.clear()
-    myChart.value.setOption(option);
-    myChart.value.on('click', function (res) {
+    myChart.setOption(option);
+    myChart.on('click', function (res) {
         if ('scatter' === res.componentSubType) {
             alert(`点击了 ${res.name} 图标`);
         }
@@ -296,7 +295,7 @@ function initMap() {
         }
     });
     window.addEventListener('resize', () => {
-        myChart.value.resize()
+        myChart.resize()
     })
 }
 </script>