[JavaScript知识库]vue echarts 迁徙图地图下钻到市，县，

直接上代码：

<template>
  <div id="jqfbid" style="height: 100%; width: 100%"></div>
</template>
<script>
// 引入34个省份文件
import myecharts from "echarts";
import anhui from "echarts/map/json/province/anhui.json";
import aomen from "echarts/map/json/province/aomen.json";
import beijing from "echarts/map/json/province/beijing.json";
import chongqing from "echarts/map/json/province/chongqing.json";
import fujian from "echarts/map/json/province/fujian.json";
import gansu from "echarts/map/json/province/gansu.json";
import guangdong from "echarts/map/json/province/guangdong.json";
import guangxi from "echarts/map/json/province/guangxi.json";
import guizhou from "echarts/map/json/province/guizhou.json";
import hainan from "echarts/map/json/province/hainan.json";
import hebei from "echarts/map/json/province/hebei.json";
import heilongjiang from "echarts/map/json/province/heilongjiang.json";
import henan from "echarts/map/json/province/henan.json";
import hubei from "echarts/map/json/province/hubei.json";
import hunan from "echarts/map/json/province/hunan.json";
import jiangsu from "echarts/map/json/province/jiangsu.json";
import jiangxi from "echarts/map/json/province/jiangxi.json";
import jilin from "echarts/map/json/province/jilin.json";
import liaoning from "echarts/map/json/province/liaoning.json";
import neimenggu from "echarts/map/json/province/neimenggu.json";
import ningxia from "echarts/map/json/province/ningxia.json";
import qinghai from "echarts/map/json/province/qinghai.json";
import shandong from "echarts/map/json/province/shandong.json";
import shanghai from "echarts/map/json/province/shanghai.json";
import shanxi from "echarts/map/json/province/shanxi.json";
import shanxi1 from "echarts/map/json/province/shanxi1.json";
import sichuan from "echarts/map/json/province/sichuan.json";
import taiwan from "echarts/map/json/province/taiwan.json";
import tianjin from "echarts/map/json/province/tianjin.json";
import xianggang from "echarts/map/json/province/xianggang.json";
import xinjiang from "echarts/map/json/province/xinjiang.json";
import xizang from "echarts/map/json/province/xizang.json";
import yunnan from "echarts/map/json/province/yunnan.json";
import zhejiang from "echarts/map/json/province/zhejiang.json";
export default {
  name: "echart-map",
  data() {
    var jsonMap = {
      安徽: anhui,
      澳门: aomen,
      北京: beijing,
      重庆: chongqing,
      福建: fujian,
      甘肃: gansu,
      广东: guangdong,
      广西: guangxi,
      贵州: guizhou,
      海南: hainan,
      河北: hebei,
      黑龙江: heilongjiang,
      河南: henan,
      湖北: hubei,
      湖南: hunan,
      江苏: jiangsu,
      江西: jiangxi,
      吉林: jilin,
      辽宁: liaoning,
      内蒙古: neimenggu,
      宁夏: ningxia,
      青海: qinghai,
      山东: shandong,
      上海: shanghai,
      山西: shanxi,
      陕西: shanxi1,
      四川: sichuan,
      台湾: taiwan,
      天津: tianjin,
      香港: xianggang,
      新疆: xinjiang,
      西藏: xizang,
      云南: yunnan,
      浙江: zhejiang,
    };
    //循环遍历注册地图
    for (let index in jsonMap) {
      myecharts.registerMap(index, jsonMap[index]);
    }
    return {};
  },
  props:{
	  userRankList:{
		  type:Array
	  },
    provinceName:{
      type:String,
      default:(()=>{})
    }
  },
  watch:{
    userRankList:{
      handler:function (newVlaue,oldVlaue) {
        this.chinaConfigure(this.userRankList);
      }
    },
    'provinceName':function (newVlaue,oldVlaue) {
        this.chinaConfigure(this.userRankList);
    }
  },
  mounted() {
    this.chinaConfigure(this.userRankList);
  },
  methods: {
    chinaConfigure(data) {
      let myChart = myecharts.init(document.getElementById("jqfbid")); //这里是为了获得容器所在位置
      myChart.clear()
      window.onresize = myChart.resize;
      let maxV=100;
      if(data && data.length>0){
        maxV = data[0].value//获取最大的值，
      }
      myChart.setOption({
        // 进行相关配置
        tooltip: {
          show: true, //鼠标移入是否触发数据
          trigger: "item", //出发方式
          renderMode: "html",
          // extraCssText: 'background: #000000; opacity:0.4;',
          // formatter: '{a} <br/>{b}: {c}',
          formatter: function (params) {
            if (params.data == undefined || params.data.type) {
              return;
            }
            let tips =
              '<div style="padding:10px;background:radial-gradient(circle at center center,rgba(25,25,112,0),rgba(25,25,112,0)),linear-gradient(#24DDE2,#24DDE2) 0 0,linear-gradient(#24DDE2,#24DDE2) 0 0,linear-gradient(#24DDE2,#24DDE2) 100% 0,linear-gradient(#24DDE2,#24DDE2) 100% 0,linear-gradient(#24DDE2,#24DDE2) 0 100%,linear-gradient(#24DDE2,#24DDE2) 0 100%,linear-gradient(#24DDE2,#24DDE2) 100% 100%,linear-gradient(#24DDE2,#24DDE2) 100% 100%;background-size:calc(100% - 2px) calc(100% - 2px),2px 10px,10px 2px,2px 10px,10px 2px,2px 10px,10px 2px,2px 10px,10px 2px,100% 2px,100% 2px,2px 100%,2px 100%;background-color: rgba(0,0,0,.25);background-repeat: no-repeat;">' +
              '<span style="color:#FFD202;font-size:16px">' +
              params.name +
              "</span>" +
              "<br/>" +
              '<span style="color:#FFF;font-size:16px">' +
              params.data.count;
               "</span>" +
            ("</div>");
            return tips;
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: maxV,
          color: [
            "#05F5E8",
            "rgba(5,245,232,0.85)",
            "rgba(5,245,232,0.60)",
            "rgba(5,245,232,0.35)",
            "rgba(5,245,232,0.10)",
          ],
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
        },
        geo: {
          // 这个是重点配置区
          map: this.provinceName, // 根据名字显示中国地图，省或市地图，
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
          },
          itemStyle: {
            normal: {
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    // color: '#1b65a0' // 0% 处的颜色
                    color: "#0a4c8b",
                  },
                  {
                    offset: 1,
                    // color: '#1b65a0' // 100% 处的颜色
                    color: "#0a4c8b",
                  },
                ],
              },
              borderColor: "#23DEFC",
              borderWidth: 1,
              shadowColor: "rgba(10,76,139,1)",
              shadowOffsetY: 0,
              shadowBlur: 30,
            },
          },
          emphasis: {
            areaColor: "#F3B329", //鼠标选择区域颜色
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
          },
          {
            name: "启动次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: data
          },
        ],
      });
    },
  },
};
</script>