Web/digital-agriculture-screen
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图标添加点击事件

Browse Source
This commit is contained in:
13713575202 2025-04-24 16:46:11 +08:00
parent e61cdf3a89
commit 852fcc404a
2 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/custom-echart-maps/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chartRef" :style="{ height, width }"></div> <div ref="chartMap" :style="{ height, width }"></div>
</template> </template>
<script> <script>
import { ref, reactive, watch, watchEffect } from 'vue'; import { ref, reactive, watch, watchEffect } from 'vue';
@ -42,13 +42,13 @@ export default {
}, },
emits: ['click'], emits: ['click'],
setup(props, { emit }) { setup(props, { emit }) {
const chartRef = ref(null); const chartMap = ref(null);
const { setOptions, getInstance, resize, regMap, startAutoPlay, onMapClick } = useEcharts(chartRef); const { setOptions, getInstance, resize, regMap, startAutoPlay, onMapClick } = useEcharts(chartMap);
const option = reactive({ const option = reactive({});
// series: [],
});
watchEffect(() => { watchEffect(() => {
regMap(props.name, props.geo);
console.info('watchEffect');
props.chartData && initCharts(); props.chartData && initCharts();
}); });
@ -63,7 +63,6 @@ export default {
); );
function initCharts() { function initCharts() {
regMap(props.name, props.geo);
if (props.option) { if (props.option) {
Object.assign(option, cloneDeep(props.option)); Object.assign(option, cloneDeep(props.option));
} }
@ -71,8 +70,8 @@ export default {
onMapClick(({ name, data }) => { onMapClick(({ name, data }) => {
console.info('onMapClick点击区域:', name); console.info('onMapClick点击区域:', name);
console.info('onMapClick关联数据:', data); // console.info('onMapClick关联数据:', data);
emit('click', { name, data }); // emit('click', { name, data });
}); });
startAutoPlay({ startAutoPlay({
interval: 2000, interval: 2000,
@ -82,7 +81,7 @@ export default {
resize(); resize();
} }
return { chartRef }; return { chartMap };
}, },
}; };
</script> </script>

16
src/hooks/useEcharts.js
View File

@ -110,7 +110,6 @@ export const useEcharts = (elRef, theme = 'default') => {
} }
function handleMapClick(params) { function handleMapClick(params) {
console.info('handleMapClick', params);
// 过滤非地图区域的点击事件 // 过滤非地图区域的点击事件
if (params.componentType === 'geo3D' || params.componentType === 'geo') { if (params.componentType === 'geo3D' || params.componentType === 'geo') {
// 获取点击区域信息 // 获取点击区域信息
@ -163,8 +162,9 @@ export const useEcharts = (elRef, theme = 'default') => {
if (!chartInstance) return; if (!chartInstance) return;
} }
clear && chartInstance?.clear(); clear && chartInstance?.clear();
chartInstance?.setOption(unref(getOptions)); chartInstance?.setOption(unref(getOptions));
// 立即绑定事件
chartInstance.off('click'); chartInstance.off('click');
chartInstance.on('click', handleMapClick); chartInstance.on('click', handleMapClick);
}, 30); }, 30);
@ -189,18 +189,6 @@ export const useEcharts = (elRef, theme = 'default') => {
console.info('getMap', echarts.getMap(mapName)); console.info('getMap', echarts.getMap(mapName));
if (!echarts.getMap(mapName)) { if (!echarts.getMap(mapName)) {
echarts.registerMap(mapName, geoJSON, { override: true }); echarts.registerMap(mapName, geoJSON, { override: true });
nextTick(() => {
if (chartInstance && cacheOptions.value.geo?.map === mapName) {
chartInstance.setOption(
{
geo: { map: mapName },
geo3D: { map: mapName },
},
true
);
}
});
} }
} }