图标添加点击事件

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>

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
-          );
-        }
-      });
     }
   }