修改

src/views/visualization/components/Map.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="relative h-full">
     <div
       v-if="isBack"
       @click="onBack"
@@ -35,10 +35,10 @@
       },
       height: {
         type: String as PropType<string>,
-        default: 'calc(100vh - 0px)',
+        default: '100%',
       },
     },
-    setup() {
+    setup(_, { emit }) {
       const chartRef = ref<HTMLDivElement | null>(null)
       const isBack = ref<boolean>(false)
       const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -257,12 +257,15 @@
       }
 
       onMounted(async () => {
-        mapJSON.value = (await (await import('./lcxz.json')).default) as any
+        const resData = (await (await import('./lcxz1.json')).default) as any
+        mapJSON.value = resData
         tempMapJSON.value = deepMerge(mapJSON.value)
         mapInit()
         getInstance()?.on('click', (e) => {
           if (e.seriesType == 'map') {
             const temp = mapJSON.value.features.filter((obj) => obj.properties.name == e.name)
+            emit('onMapChange', deepMerge(temp[0].properties))
+
             if (temp) {
               isBack.value = true
               tempMapJSON.value = deepMerge({

src/views/visualization/index.vue

@@ -17,7 +17,7 @@
           </div>
         </div>
         <div class="flex-1">
-          <!-- <Map /> -->
+          <Map @onMapChange="onMapChange" />
         </div>
         <div class="flex">
           <div class="bg-[#10272F] bg-opacity-80">
@@ -75,7 +75,12 @@
       Head,
     },
     setup() {
-      return {}
+      function onMapChange(e) {
+        console.log(e)
+      }
+      return {
+        onMapChange,
+      }
     },
   })
 </script>