From 13ec879c1e072b3341bcc3f6023663f298284119 Mon Sep 17 00:00:00 2001 From: ihzero Date: Wed, 23 Nov 2022 13:19:59 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/visualization/components/Map.vue | 51 ++++++++++++++++++---- 1 file changed, 42 insertions(+), 9 deletions(-) diff --git a/src/views/visualization/components/Map.vue b/src/views/visualization/components/Map.vue index d4c73237..de1a86a9 100644 --- a/src/views/visualization/components/Map.vue +++ b/src/views/visualization/components/Map.vue @@ -53,6 +53,8 @@ const mapJSON = ref() const tempMapJSON = ref() + let options: any = null + const { rootEmitter } = useVContext() const baseData = ref([]) @@ -85,12 +87,14 @@ }) }) registerMap('lcxz', tempMapJSON.value) - - setOptions({ + options = { backgroundColor: 'transparent', stateAnimation: { duration: 100, }, + // tooltip: { + // trigger: 'item', + // }, geo: { map: 'lcxz', aspectScale: 0.75, @@ -233,7 +237,8 @@ type: 'scatter', coordinateSystem: 'geo', tooltip: { - show: false, + trigger: 'item', + show: true, }, symbol: (_, params) => { return mapData[params.dataIndex].img @@ -246,10 +251,10 @@ { type: 'scatter', coordinateSystem: 'geo', - stateAnimation: { - duration: 300, - easing: 'bounceOut', - }, + // stateAnimation: { + // duration: 300, + // easing: 'bounceOut', + // }, label: { show: true, align: 'center', @@ -284,10 +289,12 @@ symbolSize: [100, 34], symbolOffset: [0, -46], z: 999, - data: mapData, + // data: mapData, + data: [], }, ], - }) + } + setOptions(options) } async function getBase() { @@ -315,9 +322,35 @@ tempMapJSON.value = deepMerge(mapJSON.value) getBase() } + + let tempName: any = null onMounted(async () => { await getData() + getInstance()?.on('mousemove', (e) => { + // const arr = options.series[3].data + // if (e.seriesType == 'map' && arr.length) { + // console.log('=====清除') + // options.series[3].data = [] + // getInstance()?.setOption({ series: options.series }, false) + // } + if (tempName == e.name && e.seriesType == 'scatter') return + if (e.seriesType == 'scatter') { + tempName = e.name + options.series[3].data = [e.data] + getInstance()?.setOption({ series: options.series }, false) + } + + // if (tempName == e.name) return + // tempName = e.name + // if (e.componentSubType == 'scatter') { + // options.series[3].data = [e.data] + // getInstance()?.setOption({ series: options.series }, false) + // } else { + // options.series[3].data = [e.data] + // getInstance()?.setOption({ series: options.series }, false) + // } + }) getInstance()?.on('click', (e) => { if (e.seriesType == 'effectScatter' || e.seriesType == 'scatter') { rootEmitter.emit('base:click', e.data)