update

src/components/chinaMap/chinaMap.vue

@@ -2,7 +2,7 @@
     <div class="center-map">
         <div class="china-map-box">
             <div class="tab-list">
-                <div v-for="(item,i) in list" :class="[item.isChecked?'active':'']" class="tab" @click="changeTab(i)">
+                <div v-for="(item,i) in list" :class="[currentIndex==i?'active':'']" class="tab" @click="changeTab(i)">
                     {{ item.name }}
                 </div>
             </div>
@@ -106,7 +106,10 @@ const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href
 const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href
 const legend6 = new URL('/@/assets/img/legend6.png', import.meta.url).href
 const mapIcons = [mapIcon1, mapIcon2, mapIcon3, mapIcon4, mapIcon5, mapIcon6]
-const legendList = [{img: legend1, text: '油田医院'}, {img: legend2, text: '医疗点'}, {img: legend3, text: '救护车'}, {img: legend4, text: '合作医院'}, {img: legend5, text: '地方医院'}, {img: legend6, text: '直升机'}]
+const legendList = [{img: legend1, text: '油田医院'}, {img: legend2, text: '医疗点'}, {
+    img: legend3,
+    text: '救护车'
+}, {img: legend4, text: '合作医院'}, {img: legend5, text: '地方医院'}, {img: legend6, text: '直升机'}]
 const formState = ref({
     user: '',
     password: "",
@@ -185,37 +188,30 @@ function changeTab(i) {
     }
     icons.value = []
     icons.value.push(o)
-    initMap()
+    currentIndex.value = i
     list.value = list.value.map(item => {
         item.isChecked = false
         return item
     })
-    currentIndex.value = i
-    list.value[i].isChecked = true
+    myChart.value.setOption({});
+    initMap()
+
 }
 
 let myChart = ref(null)
 onMounted(() => {
+    console.log('reload')
+    myChart.value = echarts.init(document.querySelector('.china-map-container'));
+    echarts.registerMap('china', mapJson);
     initMap();
 })
 
 function initMap() {
-    // if (!myChart.value) {
-    //     myChart.value.clear()
-    // }
-    myChart.value = echarts.init(document.querySelector('.china-map-container'));
-    echarts.registerMap('china', mapJson);
     let option = {
         tooltip: {
             show: false,
             formatter: "{b0}: {c0}"
         },
-        // grid: {
-        //     left: 20,
-        //     right: 20,
-        //     top: 20,
-        //     bottom: 20
-        // },
         geo: [
             {
                 map: 'china',
@@ -289,9 +285,9 @@ function initMap() {
             ...icons.value
         ],
     };
+    // myChart.value.clear()
     myChart.value.setOption(option);
     myChart.value.on('click', function (res) {
-        console.log(res);
         if ('scatter' === res.componentSubType) {
             alert(`点击了 ${res.name} 图标`);
         }