地图下钻再次修改

src/views/dataJq/dataV.vue

@@ -66,8 +66,8 @@ import dogMajor from "./dogMajor.vue";
 import mapCount from "./mapCount.vue";
 // 地图
 import mapBox from "./mapBox.vue";
-import mapBoxForBingTu from "./mapBoxForBingTu.vue";
-import mapBoxForZhuZhuangTu from "./mapBoxForZhuZhuangTu.vue";
+// import mapBoxForBingTu from "./mapBoxForBingTu.vue";
+// import mapBoxForZhuZhuangTu from "./mapBoxForZhuZhuangTu.vue";
 import { postRequest } from "@/api/dogView.js";
 export default {
   components: {
@@ -79,8 +79,8 @@ export default {
     dogMajor,
     mapCount,
     mapBox,
-    mapBoxForBingTu,
-    mapBoxForZhuZhuangTu,
+    // mapBoxForBingTu,
+    // mapBoxForZhuZhuangTu,
   },
   data() {
     return {

src/views/dataJq/mapBox.vue

@@ -17,6 +17,38 @@
       id="myEacherForMap"
       style="width:66.08333rem;height: 50.3333rem"
     ></div>
+    <!-- 左下角信息 -->
+    <div
+      class="infoClass"
+      v-show="showBack && currentInfo && Object.keys(currentInfo).length"
+    >
+      <div class="topClass">
+        <span class="span01">{{currentInfo.name}}</span>
+        <span class="span02">{{currentInfo.count}}</span>
+      </div>
+      <ul class="botUl">
+        <li class="botLi">
+          <span class="left_span bg1"></span>
+          <span class="center_span">一级工作犬</span>
+          <span class="right_span">{{currentInfo.dognum1}}</span>
+        </li>
+        <li class="botLi">
+          <span class="left_span bg2"></span>
+          <span class="center_span">二级工作犬</span>
+          <span class="right_span">{{currentInfo.dognum2}}</span>
+        </li>
+        <li class="botLi">
+          <span class="left_span bg3"></span>
+          <span class="center_span">三级工作犬</span>
+          <span class="right_span">{{currentInfo.dognum3}}</span>
+        </li>
+        <li class="botLi">
+          <span class="left_span bg4"></span>
+          <span class="center_span">普通工作犬</span>
+          <span class="right_span">{{currentInfo.dognum4}}</span>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -30,6 +62,8 @@ export default {
       showBack: false,
       loading: false,
 
+      currentInfo: {},
+
       fileName: "china",
       myChart: null,
       colorDatas: [
@@ -200,14 +234,23 @@ export default {
 
           this.myChart.on("mouseover", async (param) => {
             if (levelFlag === "2" || levelFlag === "3") {
-              console.log("进入了", param, levelFlag);
-              console.log(this.dataArr);
+              if (this.dataArr && this.dataArr.length) {
+                this.dataArr.forEach((itemArr) => {
+                  if (param.name.indexOf(itemArr.name) != -1) {
+                    this.currentInfo = itemArr;
+                  }
+                });
+              } else {
+                this.currentInfo = {};
+              }
+            } else {
+              this.currentInfo = {};
             }
           });
 
-          // this.myChart.on("mouseout", async (param) => {
-          //   console.log("离开了");
-          // });
+          this.myChart.on("mouseout", async (param) => {
+            this.currentInfo = {};
+          });
         }
       });
     },
@@ -278,6 +321,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
 .back {
   position: absolute;
   top: 20px;
@@ -287,4 +333,66 @@ export default {
   z-index: 999;
   cursor: pointer;
 }
+.infoClass {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  // width: 176px;
+  height: 154px;
+  background: #1d3e75;
+  border-radius: 5px;
+  padding: 12px 16px;
+  .topClass {
+    .span01 {
+      display: inline-block;
+      font-size: 16px;
+      color: #ffffff;
+    }
+    .span02 {
+      display: inline-block;
+      font-size: 16px;
+      color: #ffffff;
+      height: 16px;
+      line-height: 16px;
+      background: #537cc1;
+      border-radius: 4px;
+      padding: 0 3px;
+      margin-left: 8px;
+    }
+  }
+  .botUl {
+    .botLi {
+      span {
+        display: inline-block;
+      }
+      .left_span {
+        width: 10px;
+        height: 10px;
+        border-radius: 3px;
+      }
+      .bg1 {
+        background: rgb(255, 84, 84);
+      }
+      .bg2 {
+        background: rgb(255, 158, 84);
+      }
+      .bg3 {
+        background: rgb(49, 255, 162);
+      }
+      .bg4 {
+        background: rgb(49, 174, 255);
+      }
+      .center_span {
+        font-size: 14px;
+        color: #87b4e2;
+        margin-left: 10px;
+      }
+      .right_span {
+        font-size: 14px;
+        color: #ffffff;
+        margin-left: 10px;
+      }
+    }
+  }
+}
 </style>