wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

区市站点 添加 鼠标移动效果

This commit is contained in:
a0049873 2022-08-02 18:37:51 +08:00
parent b1c04e5f31
commit 3bb705ec3f
1 changed files with 89 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
front/src/views/home/mapTest/index.vue
View File

@ -175,6 +175,8 @@
]
} else if (val.name === '市北区') {
geoCoordMap[val.name] = [val.coord[0], val.coord[1]]
} else if (val.name === '城阳区') {
geoCoordMap[val.name] = [val.coord[0] - 0.057495, val.coord[1]]
} else if (val.name === '市南区') {
geoCoordMap[val.name] = [120.364482, 36.065671]
}
@ -573,7 +575,7 @@
symbolOffset: [0, -20],
data: [
{
name: '西海岸',
name: '',
value: geoCoordMap['西海岸'].concat([10]),
},
],
@ -610,7 +612,7 @@
symbolOffset: [0, -20],
data: [
{
name: '崂山区',
name: '',
value: geoCoordMap['崂山区'].concat([10]),
},
],
@ -647,7 +649,7 @@
symbolOffset: [0, -20],
data: [
{
name: '城阳区',
name: '',
value: geoCoordMap['城阳区'].concat([10]),
},
],
@ -684,7 +686,7 @@
symbolOffset: [0, -20],
data: [
{
name: '李沧区',
name: '',
value: geoCoordMap['李沧区'].concat([10]),
},
],
@ -701,11 +703,93 @@
}
onMounted(() => {
initMap()
myChart.on('mouseover', function () {
myChart.on('mouseover', function (params) {
console.log(params.value)
myChart.dispatchAction({
type: 'downplay',
})
let flag = true
if (
params.value[0] == '119.825774' &&
params.value[1] == '35.739174000000006'
) {
if (option.series[8].data[0].name == '西海岸') {
flag = false
}
option.series[8].data[0].name = '西海岸'
option.series[9].data[0].name = ''
option.series[10].data[0].name = ''
option.series[11].data[0].name = ''
if (flag) {
myChart.clear()
myChart.setOption(option, true)
}
} else if (
params.value[0] == '120.579994' &&
params.value[1] == '36.189191'
) {
if (option.series[9].data[0].name == '崂山区') {
flag = false
}
option.series[8].data[0].name = ''
option.series[9].data[0].name = '崂山区'
option.series[10].data[0].name = ''
option.series[11].data[0].name = ''
if (flag) {
myChart.clear()
myChart.setOption(option, true)
}
} else if (
params.value[0] == '120.421977' &&
params.value[1] == '36.18555'
) {
if (option.series[11].data[0].name == '李沧区') {
flag = false
}
option.series[8].data[0].name = ''
option.series[9].data[0].name = ''
option.series[10].data[0].name = ''
option.series[11].data[0].name = '李沧区'
if (flag) {
myChart.clear()
myChart.setOption(option, true)
}
} else if (
params.value[0] == '120.272216' &&
params.value[1] == '36.27479'
) {
if (option.series[10].data[0].name == '城阳区') {
flag = false
}
option.series[8].data[0].name = ''
option.series[9].data[0].name = ''
option.series[10].data[0].name = '城阳区'
option.series[11].data[0].name = ''
if (flag) {
myChart.clear()
myChart.setOption(option, true)
}
}
})
// myChart.on('mouseout', function (params) {
// console.log(params)
// switch (params.name) {
// case '西海岸':
// option.series[8].data[0].name = ''
// break
// case '崂山区':
// option.series[9].data[0].name = ''
// break
// case '城阳区':
// option.series[10].data[0].name = ''
// break
// case '李沧区':
// option.series[11].data[0].name = ''
// break
// }
// myChart.clear()
// myChart.setOption(option, true)
// })
myChart.on('click', function (params) {
console.log(params)
params.event.event.stopPropagation()