新加点击功能

front/src/views/home/mapTest/index.vue

@@ -1,9 +1,8 @@
 <template>
   <home-header></home-header>
-  <div class="survey-left">
+  <div class="survey-left" @click="hidePop()">
     <div ref="cityMap" class="city-map-content-echarts"></div>
-    <div class="mask">
-      <div class="box xha">
+    <div class="box xha" v-show="xhaFlag">
       <div class="top">
         <span>西海岸</span>
         <span>
@@ -35,7 +34,7 @@
       </div>
       <div class="zx"></div>
     </div>
-      <div class="box lsq">
+    <div class="box lsq" v-show="lsqFlag">
       <div class="top">
         <span>崂山区</span>
         <span>
@@ -63,7 +62,6 @@
       <div class="zx"></div>
     </div>
   </div>
-  </div>
   <ability-to-recommend-bottom></ability-to-recommend-bottom>
 </template>
 <script setup>
@@ -73,6 +71,8 @@
   import geoJson from '/public/static/echartsMapJson/qingdao.json'
   // const loadedDataUrl = '/public/static/echartsMapJson/qingdao.json'
   const echarts = require('echarts')
+  const xhaFlag = ref(false)
+  const lsqFlag = ref(false)
   const areaMenuList = ref([
     // 全市概况
     // {
@@ -180,14 +180,6 @@
     const imgActive = new Image()
     imgActive.src = '/src/assets/home/map-piece-active.png'
     option = {
-      // visualMap: {
-      //   show: false,
-      //   max: 100,
-      //   seriesIndex: 1,
-      //   inRange: {
-      //     color: ['#000000', 'yellow', 'pink'],
-      //   },
-      // },
       visualMap: {
         //图例值控制
         min: 0,
@@ -238,6 +230,7 @@
             },
           ],
           z: 2,
+          silent: true,
         },
       ],
       series: [
@@ -598,6 +591,11 @@
     console.log('echarts配置==================>', option)
     myChart.setOption(option)
   }
+  const hidePop = () => {
+    console.log('取消弹窗')
+    xhaFlag.value = false
+    lsqFlag.value = false
+  }
   onMounted(() => {
     initMap()
     myChart.on('mouseover', function () {
@@ -605,6 +603,22 @@
         type: 'downplay',
       })
     })
+    myChart.on('click', function (params) {
+      console.log(params)
+      params.event.event.stopPropagation()
+      switch (params.name) {
+        case '西海岸':
+          xhaFlag.value = !xhaFlag.value
+          lsqFlag.value = false
+          break
+        case '崂山区':
+          lsqFlag.value = !lsqFlag.value
+          xhaFlag.value = false
+          break
+        default:
+          break
+      }
+    })
   })
 </script>
 <style lang="less" scoped>
@@ -622,12 +636,7 @@
       height: 7rem;
       margin: 0rem auto;
     }
-    .mask {
-      position: absolute;
-      z-index: 1000;
-      width: 19.2rem;
-      height: 7rem;
-      margin: 0rem auto;
+
     .box {
       position: absolute;
       width: 3.18rem;
@@ -712,5 +721,4 @@
       left: 11.95rem;
     }
   }
-  }
 </style>