From 852fcc404a19aa4491f61d28da5e34ad8e4b1834 Mon Sep 17 00:00:00 2001
From: 13713575202 <1345916905@qq.com>
Date: Thu, 24 Apr 2025 16:46:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=B7=BB=E5=8A=A0=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/custom-echart-maps/index.vue | 19 +++++++++----------
 src/hooks/useEcharts.js                     | 16 ++--------------
 2 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/components/custom-echart-maps/index.vue b/src/components/custom-echart-maps/index.vue
index f370744..0725c9f 100644
--- a/src/components/custom-echart-maps/index.vue
+++ b/src/components/custom-echart-maps/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="chartRef" :style="{ height, width }"></div>
+  <div ref="chartMap" :style="{ height, width }"></div>
 </template>
 <script>
 import { ref, reactive, watch, watchEffect } from 'vue';
@@ -42,13 +42,13 @@ export default {
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const chartRef = ref(null);
-    const { setOptions, getInstance, resize, regMap, startAutoPlay, onMapClick } = useEcharts(chartRef);
-    const option = reactive({
-      // series: [],
-    });
+    const chartMap = ref(null);
+    const { setOptions, getInstance, resize, regMap, startAutoPlay, onMapClick } = useEcharts(chartMap);
+    const option = reactive({});
 
     watchEffect(() => {
+      regMap(props.name, props.geo);
+      console.info('watchEffect');
       props.chartData && initCharts();
     });
 
@@ -63,7 +63,6 @@ export default {
     );
 
     function initCharts() {
-      regMap(props.name, props.geo);
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
@@ -71,8 +70,8 @@ export default {
 
       onMapClick(({ name, data }) => {
         console.info('onMapClick点击区域:', name);
-        console.info('onMapClick关联数据:', data);
-        emit('click', { name, data });
+        // console.info('onMapClick关联数据:', data);
+        // emit('click', { name, data });
       });
       startAutoPlay({
         interval: 2000,
@@ -82,7 +81,7 @@ export default {
       resize();
     }
 
-    return { chartRef };
+    return { chartMap };
   },
 };
 </script>
diff --git a/src/hooks/useEcharts.js b/src/hooks/useEcharts.js
index 348b635..6cf77b7 100644
--- a/src/hooks/useEcharts.js
+++ b/src/hooks/useEcharts.js
@@ -110,7 +110,6 @@ export const useEcharts = (elRef, theme = 'default') => {
   }
 
   function handleMapClick(params) {
-    console.info('handleMapClick', params);
     // 过滤非地图区域的点击事件
     if (params.componentType === 'geo3D' || params.componentType === 'geo') {
       // 获取点击区域信息
@@ -163,8 +162,9 @@ export const useEcharts = (elRef, theme = 'default') => {
           if (!chartInstance) return;
         }
         clear && chartInstance?.clear();
-
         chartInstance?.setOption(unref(getOptions));
+
+        // 立即绑定事件
         chartInstance.off('click');
         chartInstance.on('click', handleMapClick);
       }, 30);
@@ -189,18 +189,6 @@ export const useEcharts = (elRef, theme = 'default') => {
     console.info('getMap', echarts.getMap(mapName));
     if (!echarts.getMap(mapName)) {
       echarts.registerMap(mapName, geoJSON, { override: true });
-
-      nextTick(() => {
-        if (chartInstance && cacheOptions.value.geo?.map === mapName) {
-          chartInstance.setOption(
-            {
-              geo: { map: mapName },
-              geo3D: { map: mapName },
-            },
-            true
-          );
-        }
-      });
     }
   }