diff --git a/src/assets/images/basic/containerBotBG.png b/src/assets/images/basic/containerBotBG.png
new file mode 100644
index 0000000..9c0aa08
Binary files /dev/null and b/src/assets/images/basic/containerBotBG.png differ
diff --git a/src/assets/images/vsualized/gmmap.svg b/src/assets/images/vsualized/gmmap.svg
deleted file mode 100644
index 80e6d0a..0000000
--- a/src/assets/images/vsualized/gmmap.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/assets/images/vsualized/home/mapopup.png b/src/assets/images/vsualized/mapopup.png
similarity index 100%
rename from src/assets/images/vsualized/home/mapopup.png
rename to src/assets/images/vsualized/mapopup.png
diff --git a/src/components/centerMap.vue b/src/components/centerMap.vue
index a84abb3..2516b18 100644
--- a/src/components/centerMap.vue
+++ b/src/components/centerMap.vue
@@ -2,22 +2,25 @@
diff --git a/src/components/custom-rank-list/index.vue b/src/components/custom-rank-list/index.vue
index f792eee..f0d5024 100644
--- a/src/components/custom-rank-list/index.vue
+++ b/src/components/custom-rank-list/index.vue
@@ -187,7 +187,7 @@ onUnmounted(() => {
.custom-rank-list {
overflow: hidden;
width: 100%;
- height: 100%;
+ height: v-bind('h+"px"');
.row-item {
display: flex;
justify-content: center;
diff --git a/src/hooks/useEcharts.js b/src/hooks/useEcharts.js
index cc00ec0..ee185c7 100644
--- a/src/hooks/useEcharts.js
+++ b/src/hooks/useEcharts.js
@@ -1,4 +1,4 @@
-import { unref, nextTick, watch, computed, ref } from 'vue';
+import { unref, nextTick, watch, computed, ref, markRaw } from 'vue';
import { useDebounceFn, tryOnUnmounted } from '@vueuse/core';
import { useTimeoutFn } from './useTimeout';
import { useEventListener } from './useEventListener';
@@ -11,6 +11,8 @@ export const useEcharts = (elRef, theme = 'default') => {
const currentIndex = ref(-1);
const dataLength = ref(0);
+ let mapClickHandler = null;
+
// 新增方法 - 启动轮播
const startAutoPlay = (options = {}) => {
const {
@@ -60,6 +62,7 @@ export const useEcharts = (elRef, theme = 'default') => {
const getDarkMode = computed(() => {
return theme === 'default' ? 'dark' : theme;
});
+
let chartInstance = null;
let resizeFn = resize;
const cacheOptions = ref({});
@@ -89,7 +92,8 @@ export const useEcharts = (elRef, theme = 'default') => {
return;
}
- chartInstance = echarts.init(el, t);
+ chartInstance = markRaw(echarts.init(el, t));
+
const { removeEvent } = useEventListener({
el: window,
name: 'resize',
@@ -105,6 +109,35 @@ export const useEcharts = (elRef, theme = 'default') => {
});
}
+ function handleMapClick(params) {
+ console.info('handleMapClick', params);
+ // 过滤非地图区域的点击事件
+ if (params.seriesType === 'map3D' || params.seriesType === 'map') {
+ // 获取点击区域信息
+ const mapName = params.name;
+ const regionData = params.data || {};
+ console.info('seriesType', params.seriesType);
+ // 执行注册的回调函数
+ 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,
@@ -130,8 +163,11 @@ export const useEcharts = (elRef, theme = 'default') => {
if (!chartInstance) return;
}
clear && chartInstance?.clear();
-
chartInstance?.setOption(unref(getOptions));
+
+ // 立即绑定事件
+ chartInstance.off('click');
+ chartInstance.on('click', handleMapClick);
}, 30);
});
}
@@ -145,12 +181,16 @@ export const useEcharts = (elRef, theme = 'default') => {
* @param {string} mapName - 地图名称
* @param {object} geoJSON - GeoJSON 数据
*/
- function registerMap(mapName, geoJSON) {
+ function regMap(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(
@@ -167,6 +207,9 @@ export const useEcharts = (elRef, theme = 'default') => {
tryOnUnmounted(() => {
stopAutoPlay(); // 清理定时器
if (!chartInstance) return;
+ if (chartInstance) {
+ chartInstance.off('click', handleMapClick);
+ }
removeResizeFn();
chartInstance.dispose();
chartInstance = null;
@@ -184,8 +227,9 @@ export const useEcharts = (elRef, theme = 'default') => {
resize,
echarts,
getInstance: () => chartInstance,
- registerMap,
+ regMap,
startAutoPlay, // 暴露轮播方法
stopAutoPlay,
+ onMapClick,
};
};
diff --git a/src/utils/echarts.js b/src/utils/echarts.js
index f03b63c..dd4eae8 100644
--- a/src/utils/echarts.js
+++ b/src/utils/echarts.js
@@ -31,6 +31,7 @@ import {
TimelineComponent,
CalendarComponent,
GraphicComponent,
+ GeoComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
@@ -61,6 +62,7 @@ echarts.use([
GaugeChart,
ScatterChart,
EffectScatterChart,
+ GeoComponent,
]);
export default echarts;
diff --git a/src/views/land/components/distributionCharts.vue b/src/views/land/components/distributionCharts.vue
index 280eb76..b4cb3dd 100644
--- a/src/views/land/components/distributionCharts.vue
+++ b/src/views/land/components/distributionCharts.vue
@@ -18,6 +18,14 @@ const state = reactive({
axisPointer: {
type: 'shadow',
},
+ formatter: (data) => {
+ const params = data[0];
+ let str = `
+ ${params.name}
+ ${params.marker} ${params.data} 万亩
+
`;
+ return str;
+ },
},
barStyle: {
barWidth: 15,
diff --git a/src/views/land/components/landCirculation.vue b/src/views/land/components/landCirculation.vue
index 687d111..c642cca 100644
--- a/src/views/land/components/landCirculation.vue
+++ b/src/views/land/components/landCirculation.vue
@@ -7,7 +7,7 @@