diff --git a/front/src/views/home/mapTest/index.vue b/front/src/views/home/mapTest/index.vue index 1d0ba2f0..46ca48f9 100644 --- a/front/src/views/home/mapTest/index.vue +++ b/front/src/views/home/mapTest/index.vue @@ -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()