echarts地图下钻

<template>
  <div class="cheartsMap" v-loading="loading">
    <div id="cheartsMap_main" class="cheartsMap_main" />
    <el-button @click="goBack" type="primary" class="cheartsMap_btn" v-if="mapCode !== '130000'" size="mini">返回
    </el-button>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
// import moment from "moment";
import baseService from "@/service/baseService";
export default {
  props: {
    searchFromBottom: {
      type: Object
    }
  },
  data() {
    return {
      mapArea: "province",
      cityName: "河北省",
      mapCode: "130000",
      loading: false,
      searchForm: {
        startTime: "",
        endTime: "",
        type: "1"
      },
      cityMap: {
        石家庄市: "130100",
        唐山市: "130200",
        秦皇岛市: "130300",
        邯郸市: "130400",
        邢台市: "130500",
        保定市: "130600",
        张家口市: "130700",
        承德市: "130800",
        沧州市: "130900",
        廊坊市: "131000",
        衡水市: "131100"
      },
      cityDataList: [], //所有城市数据列表
      countiesDataList: [] // 所有县区数据列表
    };
  },

  mounted() {
    this.getCityDataList();
  },
  methods: {
    //初始化
    async init() {
      let _this = this;
      const MyChart = echarts.init(document.getElementById("cheartsMap_main"));
      const option = {
        title: {
          text: "申请地域分布",
          top: 10,
          left: 20
        },
        series: [
          {
            type: "map",
            geoIndex: 0,
            data: [] // 添加图表显示的数据
          }
        ],
        geo: {
          type: "map",
          map: "河北省",
          label: {
            normal: {
              show: true,
              color: "#fff"
            },
            emphasis: {
              show: true,
              color: "#fff"
            }
          },
          zoom: 1.1, // 当前视角的缩放比例
          roam: false, // 是否开启拖拽或缩放
          scaleLimit: {
            // 滚轮缩放的极限控制
            min: 1,
            max: 2.5
          },
          itemStyle: {
            normal: {
              areaColor: "#00136A",
              borderColor: "#00f0fa",
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#01012a"
            },
            emphasis: {
              areaColor: "#F9C723",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        tooltip: {
          appendToBody: true,
          trigger: "item", // 触发条件
          confine: true,
          alwaysShowContent: false,
          backgroundColor: "RGBA(136, 123, 135, 0.8)",
          formatter: function (params) {
            //点击进入下级城市的点击事件可以写在这个div里
            return (
              `<div class='pop-up'>
                          <p style="margin:0;">地区：` +
              params.name +
              `</p>
                          <p style="margin:0;">申请数量：` +
              params.data.count +
              `次</p>
                     </div>`
            );
          },
          textStyle: {
            color: "#ffffff"
          }
        }
      };
      // 获取矢量地图数据
      let data = await this.getJson();
      _this.loading = false;
      if (data.status === 200) {
        let dataList = [];
        data.data.features.map((item) => {
          let itemData = _this.cityDataList.find((cityItem) => cityItem.name == item.properties.name);
          let params = {
            name: item.properties.name,
            adcode: item.properties.adcode,
            count: itemData.num // 弹框显示数据
          };
          dataList.push(params);
        });
        echarts.registerMap(_this.cityName, data.data);
        option.geo.map = _this.cityName;
        option.series[0].data = dataList;
        MyChart.clear();
        MyChart.setOption(option);
        window.addEventListener("resize", function () {
          MyChart.resize();
        });
        MyChart.on("click", async (params) => {
          //地图下钻
          if (_this.cityMap[params.name]) {
            _this.mapArea = "city";
            _this.cityName = params.name;
            _this.mapCode = _this.cityMap[params.name];
            // 获取矢量地图数据
            let data = await this.getJson();
            _this.loading = false;
            if (data.status === 200) {
              let dataList = [];
              data.data.features.map((item) => {
                let itemData = _this.countiesDataList.find((cityItem) => cityItem.name == item.properties.name);
                let params = {
                  name: item.properties.name,
                  adcode: item.properties.adcode,
                  count: itemData.num // 弹框显示数据
                };
                dataList.push(params);
              });
              echarts.registerMap(_this.cityName, data.data);
              option.geo.map = _this.cityName;
              option.series[0].data = dataList;
              MyChart.setOption(option);
              window.addEventListener("resize", function () {
                MyChart.resize();
              });
            }
          }
        });
      }
    },
    // 返回上一级地图
    async goBack() {
      this.mapArea = "province";
      this.cityName = "河北省";
      this.mapCode = "130000";
      this.init();
    },
    // 获取地图JSON
    getJson() {
      this.loading = true;
      return axios.get(`./json/${this.mapArea}/${this.mapCode}.json`);
    },
    // 获取城市信息列表
    getCityDataList() {
      this.loading = true;
      baseService
        .get(`/tyfw/serviceanalysis/region/2`)
        .then((res) => {
          if (res.code === 0) {
            this.cityDataList = res.data;
            return baseService.get(`/tyfw/serviceanalysis/region/3`);
          } else {
            return this.$message.error(res.msg);
          }
        })
        .then((res) => {
          if (res.code === 0) {
            this.countiesDataList = res.data;
            this.loading = false;
            this.init();
          } else {
            return this.$message.error(res.msg);
          }
        });
    }
  },
  // watch: {
  //   searchFromBottom: {
  //     handler(newVal) {
  //       console.log(newVal, 'watch')
  //     },
  //     immediate: true,
  //     deep: true
  //   }
  // }
};
</script>

<style scoped lang="less">
.cheartsMap {
  width: 100%;
  height: 100%;
  position: relative;

  .cheartsMap_main {
    width: 100%;
    height: 100%;
  }

  .cheartsMap_btn {
    position: absolute;
    top: 20px;
    right: 30px;
    line-height: 16px;
  }
}
</style>