首页地图部分功能

src/views/Home/Map/index.vue

+<template>
+  <div id="map" ref="areaRankingAll"></div>
+</template>
+<script>
+import * as echarts from "echarts"
+import axios from "axios" //采用axios动态请求数据
+export default {
+  data() {
+    return {
+      //线上请求JSON文件数据地址
+      publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
+      //allCode 区域行政编码信息
+      allCode: [
+        // {name:"廉江市",adcode:"440881"}
+      ],
+      locate: [
+        {
+          name: "安徽",
+          value: [117.29, 32.0581, 50],
+        },
+      ],
+    }
+  },
+  watch: {},
+  mounted() {
+    this.initChart() //初始化地图
+  },
+  methods: {
+    cancel() {
+      this.initChart()
+    },
+    getGeoJson(jsonName) {
+      return axios.get(this.publicUrl + jsonName)
+    },
+    initEcharts(geoJson, name, chart) {
+      console.log(geoJson.features, name)
+      let self = this
+      echarts.registerMap(name, geoJson)
+      let option = {
+        title: {
+          text: "", // 地图名称
+        },
+        tooltip: {
+          show: true,
+          formatter: function (params) {
+            if (params.value.length > 1) {
+              return params.name + "：" + params.value[2] + "人"
+            }
+            return `${params.name} ： ${params.value ? params.value : 0}人`
+          },
+          textStyle: { fontSize: 14, fontFamily: "fzzz", color: "#fff" },
+          backgroundColor: "rgba(0,0,0,0.3)",
+          borderColor: "rgba(0,0,0,0.3)",
+        },
+        geo: {
+          show: false,
+          map: name,
+          width: name == "中国" ? "70%" : "36%", // 约束地图大小
+          top: "4%",
+        },
+        series: [
+          {
+            // 小点，通过geo知道地图位置
+            name: "",
+            type: "scatter",
+            coordinateSystem: "geo",
+            data: this.locate,
+            symbolSize: 8,
+            encode: {
+              value: 2,
+            },
+            tooltip: {
+              show: false,
+            },
+            label: {},
+            emphasis: {},
+          },
+          {
+            type: "map",
+            map: name,
+            width: name == "中国" ? "70%" : "30%", // 约束地图大小
+            top: "5%",
+            // roam: true, //是否开启滚轮缩放
+            // zoom: 1.5, //当前视角缩放比，调节这个设置初始大小
+            // center: ["10%", 0],
+            // scaleLimit: {
+            //   min: 0.2,
+            //   max: 2,
+            // }, // 最大最小缩放比例
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                areaColor: "#EDEFFF",
+                borderColor: "#7597FA",
+                borderWidth: 1,
+              },
+              emphasis: {
+                areaColor: "#4E68FF", //悬浮背景
+              },
+            },
+            data: [{ name: "安徽省", value: 50 }],
+          },
+        ],
+      }
+      chart.setOption(option, true) //加个true解决下钻的视角偏移
+      chart.off("click")
+      chart.on("click", (params) => {
+        //点击区域时的行政编码，然后再进行匹配
+        let clickCode = self.allCode.filter(
+          (areaJson) => areaJson.name === params.name
+        )[0].adcode
+        console.log("行政编码:" + clickCode)
+        //1、如果要实现多级下钻并且展示子区域的话，下钻点击事件请求的JSON必须是该点击区域的全面父级JSON(即没有自己只有孩子们组成)
+        //2、如果要实现地图只下钻一次，并且不展示目标下钻区域的子区域。如第一层地图是中国，实现点击某个省下钻到该省，但是不展示该省的子区域，那么下钻点击事件请求的JSON必须是该点击区域的确切json(即只有自己没有孩子们)
+        //声明：比如这里线上引用的父级JSON带有：地域行政编码_full.json(如中国 100000_full.json),子级JSON是行政编码.json(如廉江市 440881.json)
+        self
+          .getGeoJson(clickCode + "_full.json")
+          .then((res) => {
+            self.initEcharts(res.data, params.name, chart)
+          })
+          .catch((err) => {
+            console.log(err, "err")
+            self.getGeoJson("100000_full.json").then((China) => {
+              self.initEcharts(China.data, "中国", chart)
+            })
+          })
+        console.log(params)
+      })
+    },
+    //带头函数-初始化
+    initChart() {
+      let chart = echarts.init(this.$refs.areaRankingAll)
+      //this.allCode获取所有的区域编码信息
+      this.getGeoJson("all.json").then((all) => {
+        this.allCode = all.data
+      })
+      //初始化地图展示
+      this.getGeoJson("100000_full.json").then((China) => {
+        this.initEcharts(China.data, "中国", chart)
+      })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped></style>

src/views/Home/index.vue

@@ -33,7 +33,8 @@
       <div class="flex">
         <div class="left box cenbox">
           <div class="box_title text-center">联盟地图</div>
-          <img class="map" src="~@/assets/img/Home/map.png" alt="" />
+          <!-- <img class="map" src="~@/assets/img/Home/map.png" alt="" /> -->
+          <Map></Map>
         </div>
         <div class="right box tabbox" style="height: 458px">
           <el-tabs v-model="exTab">
@@ -193,7 +194,9 @@
 <script>
 import { getRankTotal, getCurrentQuarter } from "@/api/Home"
 import { articleList } from "@/api/operation-management"
+import Map from "./Map"
 export default {
+  components: { Map },
   data() {
     return {
       fixIndex: -1,
@@ -426,7 +429,7 @@ export default {
     }
     .cenbox {
       height: 458px;
-      .map {
+      #map {
         width: 100%;
         height: 422px;
         object-fit: contain;