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

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()