src/components/centerMap.vue

@@ -2,17 +2,22 @@
   <div class="map-center-warp">
     <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
     <div class="map-pos">
-      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
+      <custom-echart-maps
+        :chart-data="chartsData.valData"
+        height="100%"
+        width="100%"
+        :option="chartsData.option"
+        :geo="geoData"
+        :name="mapName"
+        @click="mapClick"
+      />
     </div>
   </div>
 </template>
 <script setup>
 import { isEmpty, getAssetsFile } from '@/utils';
 import { ref, reactive, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
 import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
-const route = useRoute();
-
 var aspectScale = 0.8807505292367753;
 // var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
 // var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
@@ -20,7 +25,8 @@ var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
 
 const isShow = ref(false);
 let geoData = geoJsonData;
-let mapName = ref('ZJ' + route.name);
+let mapName = ref('ZJ');
+const info = ref({});
 const chartsData = reactive({
   option: {
     title: {
@@ -50,12 +56,11 @@ const chartsData = reactive({
     geo3D: {
       map: mapName.value,
       roam: true,
-      zoom: 1,
+      zoom: 1.2,
-      left: '30px',
       show: true,
       zlevel: -1, // 必须设置，
       viewControl: {
-        distance: 115,
+        distance: 110,
         alpha: 60,
         beta: 0,
         minBeta: -360,
@@ -98,28 +103,57 @@ const chartsData = reactive({
       },
     },
     series: [
+      // 闪烁散点图系列
       {
-        type: 'map3D',
+        name: '闪烁散点',
-        map: mapName.value,
+        type: 'effectScatter', // 使用 effectScatter 类型
-        zoom: 1,
+        coordinateSystem: 'geo',
-        left: '30px',
+        data: [
-        viewControl: {
+          // 示例数据点，实际应用中应替换为真实的数据
-          distance: 115,
+          {
-          alpha: 60,
+            name: '孟定镇',
-          beta: 0,
+            value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
-          minBeta: -360,
+            itemStyle: {
-          maxBeta: 720,
+              color: '#FF0000', // 孟定镇的颜色
-          // 限制视角，使不能旋转缩放平移
-          // rotateSensitivity: 0,
-          // zoomSensitivity: 0,
-          // panSensitivity: 0,
             },
+          },
+          {
+            name: '勐永镇',
+            value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
+            itemStyle: {
+              color: '#00FF00', // 勐永镇的颜色
+            },
+          },
+        ],
+        symbolSize: function (val) {
+          return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
+        },
+        label: {
+          formatter: '{b}',
+          position: 'right',
+          show: false,
+        },
+        rippleEffect: {
+          period: 4, // 波纹动画周期
+          scale: 3, // 波纹缩放比例
+          brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
+        },
+        hoverAnimation: false,
+      },
+    ],
+  },
+  valData: [
+    {
+      map: mapName.value,
+      roam: true,
+      zoom: 0.9,
+      show: true,
       itemStyle: {
         // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
         color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
         opacity: 1, // 图形的不透明度 [ default: 1 ]
         borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
-          borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
+        borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ]
       },
       label: {
         show: true,
@@ -127,7 +161,7 @@ const chartsData = reactive({
         color: '#000',
         padding: [6, 4, 2, 4],
         borderRadius: 4,
-          backgroundColor: 'rgba(255,255,255,0.2)',
+        backgroundColor: 'rgba(255,255,255,.66)',
         textStyle: {
           fontSize: 12,
           color: '#E87813', // 地图初始化区域字体颜色
@@ -135,19 +169,66 @@ const chartsData = reactive({
           borderColor: '#000',
         },
       },
-        emphasis: {
+      // emphasis: {
-          //高亮状态的效果
+      //   //高亮状态的效果
-          label: {
+      //   label: {
-            show: true,
+      //     show: true,
-            color: '#fff',
+      //     color: '#fff',
+      //   },
+      //   itemStyle: {
+      //     // show: false,
+      //     areaColor: {
+      //       type: 'linear',
+      //       x: 0,
+      //       y: 0,
+      //       x2: 1,
+      //       y2: 0,
+      //       colorStops: [
+      //         { offset: 0, color: '#4bffb4' },
+      //         { offset: 1, color: '#4bffb4' },
+      //       ],
+      //     },
+      //   },
+      // },
     },
+    // 闪烁散点图系列
+    {
+      name: '闪烁散点',
+      type: 'effectScatter', // 使用 effectScatter 类型
+      coordinateSystem: 'geo',
+      data: [
+        // 示例数据点，实际应用中应替换为真实的数据
+        {
+          name: '孟定镇',
+          value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
           itemStyle: {
-            color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
+            color: '#FF0000', // 孟定镇的颜色
           },
         },
+        {
+          name: '贺派乡',
+          value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
+          itemStyle: {
+            color: '#00FF00', // 贺派乡的颜色
+          },
         },
       ],
+      symbolSize: function (val) {
+        return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
       },
+      label: {
+        formatter: '{b}',
+        position: 'right',
+        show: false,
+      },
+      rippleEffect: {
+        period: 4, // 波纹动画周期
+        scale: 3, // 波纹缩放比例
+        brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
+      },
+      hoverAnimation: false,
+    },
+  ],
 });
 
 const mapClick = (data) => {

src/components/custom-echart-maps/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chartMap" :style="{ height, width }"></div>
+  <div ref="chartRef" :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 chartMap = ref(null);
+    const chartRef = ref(null);
-    const { setOptions, getInstance, resize, regMap, startAutoPlay, onMapClick } = useEcharts(chartMap);
+    const { setOptions, getInstance, resize, registerMap, startAutoPlay } = useEcharts(chartRef);
-    const option = reactive({});
+    const option = reactive({
+      // series: [],
+    });
 
     watchEffect(() => {
-      regMap(props.name, props.geo);
-      console.info('watchEffect');
       props.chartData && initCharts();
     });
 
@@ -66,22 +66,25 @@ export default {
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
+      // option.series = props.chartData;
       setOptions(option);
-
-      onMapClick(({ name, data }) => {
-        console.info('onMapClick点击区域:', name);
-        // console.info('onMapClick关联数据:', data);
-        // emit('click', { name, data });
-      });
       startAutoPlay({
         interval: 2000,
         seriesIndex: 0,
         showTooltip: true,
       });
+      registerMap(props.name, props.geo);
       resize();
+      getInstance()?.off('click', onClick);
+      getInstance()?.on('click', onClick);
     }
 
-    return { chartMap };
+    function onClick(params) {
+      console.info('地图onClick', params);
+      emit('click', params);
+    }
+
+    return { chartRef };
   },
 };
 </script>

src/hooks/useEcharts.js

@@ -1,4 +1,4 @@
-import { unref, nextTick, watch, computed, ref, markRaw } from 'vue';
+import { unref, nextTick, watch, computed, ref } from 'vue';
 import { useDebounceFn, tryOnUnmounted } from '@vueuse/core';
 import { useTimeoutFn } from './useTimeout';
 import { useEventListener } from './useEventListener';
@@ -11,8 +11,6 @@ export const useEcharts = (elRef, theme = 'default') => {
   const currentIndex = ref(-1);
   const dataLength = ref(0);
 
-  let mapClickHandler = null;
-
   // 新增方法 - 启动轮播
   const startAutoPlay = (options = {}) => {
     const {
@@ -62,7 +60,6 @@ export const useEcharts = (elRef, theme = 'default') => {
   const getDarkMode = computed(() => {
     return theme === 'default' ? 'dark' : theme;
   });
-
   let chartInstance = null;
   let resizeFn = resize;
   const cacheOptions = ref({});
@@ -92,8 +89,7 @@ export const useEcharts = (elRef, theme = 'default') => {
         return;
       }
 
-      chartInstance = markRaw(echarts.init(el, t));
+      chartInstance = echarts.init(el, t);
-
       const { removeEvent } = useEventListener({
         el: window,
         name: 'resize',
@@ -109,34 +105,6 @@ export const useEcharts = (elRef, theme = 'default') => {
     });
   }
 
-  function handleMapClick(params) {
-    // 过滤非地图区域的点击事件
-    if (params.componentType === 'geo3D' || params.componentType === 'geo') {
-      // 获取点击区域信息
-      const mapName = params.name;
-      const regionData = params.data || {};
-
-      // 执行注册的回调函数
-      if (typeof mapClickHandler === 'function') {
-        mapClickHandler({
-          name: mapName,
-          data: regionData,
-          coordinates: params.event?.event?.point,
-          // originalParams: params
-        });
-      }
-    }
-  }
-
-  function onMapClick(handler) {
-    mapClickHandler = handler;
-
-    // 返回解绑方法
-    return () => {
-      mapClickHandler = null;
-    };
-  }
-
   function setOptions(options = {}, clear = true) {
     const mergedOptions = {
       animation: true,
@@ -162,11 +130,8 @@ export const useEcharts = (elRef, theme = 'default') => {
           if (!chartInstance) return;
         }
         clear && chartInstance?.clear();
-        chartInstance?.setOption(unref(getOptions));
 
-        // 立即绑定事件
+        chartInstance?.setOption(unref(getOptions));
-        chartInstance.off('click');
-        chartInstance.on('click', handleMapClick);
       }, 30);
     });
   }
@@ -180,16 +145,12 @@ export const useEcharts = (elRef, theme = 'default') => {
    * @param {string} mapName - 地图名称
    * @param {object} geoJSON - GeoJSON 数据
    */
-  function regMap(mapName, geoJSON) {
+  function registerMap(mapName, geoJSON) {
     if (!mapName || !geoJSON) {
       console.warn('地图名称或 GeoJSON 数据无效');
       return;
     }
-
+    echarts.registerMap(mapName, geoJSON);
-    console.info('getMap', echarts.getMap(mapName));
-    if (!echarts.getMap(mapName)) {
-      echarts.registerMap(mapName, geoJSON, { override: true });
-    }
   }
 
   watch(
@@ -206,9 +167,6 @@ export const useEcharts = (elRef, theme = 'default') => {
   tryOnUnmounted(() => {
     stopAutoPlay(); // 清理定时器
     if (!chartInstance) return;
-    if (chartInstance) {
-      chartInstance.off('click', handleMapClick);
-    }
     removeResizeFn();
     chartInstance.dispose();
     chartInstance = null;
@@ -226,9 +184,8 @@ export const useEcharts = (elRef, theme = 'default') => {
     resize,
     echarts,
     getInstance: () => chartInstance,
-    regMap,
+    registerMap,
     startAutoPlay, // 暴露轮播方法
     stopAutoPlay,
-    onMapClick,
   };
 };

src/utils/echarts.js

@@ -31,7 +31,6 @@ import {
   TimelineComponent,
   CalendarComponent,
   GraphicComponent,
-  GeoComponent,
 } from 'echarts/components';
 
 import { CanvasRenderer } from 'echarts/renderers';
@@ -62,7 +61,6 @@ echarts.use([
   GaugeChart,
   ScatterChart,
   EffectScatterChart,
-  GeoComponent,
 ]);
 
 export default echarts;