vue使用ecahrts实现省市县地图上下钻到县一级（甘肃省为例）

实现echarts地图上下钻

直接食用

代码中的散点图是根据json文件中’cp’字段对应的坐标来定位的，有些地图json文件是’centroid’字段，建议配合https://blog.csdn.net/qq_41206305/article/details/116404455?spm=1001.2014.3001.5501
食用最佳

<template>
  <div>
    <!-- <button @click="a1">1111</button> -->
    <div style="position: relative; height: 1000px; width: 1000px">
      <div id="main"></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      symbolUrl: require("../../assets/symbol.png"),
      //根据区划做索引
      city: {
        甘肃省: 62,
        兰州市: 620100,
        嘉峪关市: 620200,
        酒泉市: 620900,
        张掖市: 620700,
        金昌市: 620300,
        武威市: 620600,
        白银市: 620400,
        定西市: 621100,
        天水市: 620500,
        平凉市: 620800,
        庆阳市: 621000,
        陇南市: 621200,
        临夏回族自治州: 622900,
        甘南藏族自治州: 623000,
        // 各县

        城关区: 620102,
        七里河区: 620103,
        西固区: 620104,
        安宁区: 620105,
        红古区: 620111,
        永登县: 620121,
        皋兰县: 620122,
        榆中县: 620123,
        市辖区: 620200,
        金川区: 620302,
        永昌县: 620321,
        白银区: 620402,
        平川区: 620403,
        靖远县: 620421,
        会宁县: 620422,
        景泰县: 620423,
        秦州区: 620502,
        麦积区: 620503,
        清水县: 620521,
        秦安县: 620522,
        甘谷县: 620523,
        武山县: 620524,
        张家川回族自治县: 620525,
        凉州区: 620602,
        民勤县: 620621,
        古浪县: 620622,
        天祝藏族自治县: 620623,
        甘州区: 620702,
        肃南裕固族自治县: 620721,
        民乐县: 620722,
        临泽县: 620723,
        高台县: 620724,
        山丹县: 620725,
        崆峒区: 620802,
        泾川县: 620821,
        灵台县: 620822,
        崇信县: 620823,
        庄浪县: 620825,
        静宁县: 620826,
        华亭市: 620881,
        肃州区: 620902,
        金塔县: 620921,
        瓜州县: 620922,
        肃北蒙古族自治县: 620923,
        阿克塞哈萨克族自治县: 620924,
        玉门市: 620981,
        敦煌市: 620982,
        西峰区: 621002,
        庆城县: 621021,
        环县: 621022,
        华池县: 621023,
        合水县: 621024,
        正宁县: 621025,
        宁县: 621026,
        镇原县: 621027,
        安定区: 621102,
        通渭县: 621121,
        陇西县: 621122,
        渭源县: 621123,
        临洮县: 621124,
        漳县: 621125,
        岷县: 621126,
        武都区: 621202,
        成县: 621221,
        文县: 621222,
        宕昌县: 621223,
        康县: 621224,
        西和县: 621225,
        礼县: 621226,
        徽县: 621227,
        两当县: 621228,
        临夏市: 622901,
        临夏县: 622921,
        康乐县: 622922,
        永靖县: 622923,
        广河县: 622924,
        和政县: 622925,
        东乡族自治县: 622926,
        积石山保安族东乡族撒拉族自治县: 622927,
        合作市: 623001,
        临潭县: 623021,
        卓尼县: 623022,
        舟曲县: 623023,
        迭部县: 623024,
        玛曲县: 623025,
        碌曲县: 623026,
        夏河县: 623027,
      },

      queryName: "甘肃省",
      // 上钻的
      cityOver: ["甘肃省"],
      //指示点数据
      symbolData: [],
    };
  },
  mounted() {
    this.getJson(this.queryName);
  },
  methods: {
    async getJson(name) {
      const { data: res } = await this.$http.get(
        "./js/62/" + this.city[name] + ".json"
      );

      let cityName = [];
      res.features.forEach((item) => {
        let tmp = {
          name: item.properties.name,
          //cp字段确定散点图定位
          value: item.properties.cp,
        };
        cityName.push(tmp);
        // console.log(item.properties.name);
      });
      // console.log(cityName);
      this.symbolData = cityName;

      echarts.registerMap(name, res);
      this.drawChart(name, cityName);
    },

    drawChart(name, dataName) {
      var chartDom = document.getElementById("main");
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom);
      var that = this;
      var option;
      option = {
        grid: {
          zlevel: -1,
          z: -1,
        },
        tooltip: {
          show: false,
        },
        geo: {
          type: "map",
          map: name,
          roam: true,
          //   showLegendSymbol: false,
          label: {
            show: true,
          },
          // data: dataName,

          itemStyle: {
            normal: {
              //未选中样式
              //背景颜色
              areaColor: "#f1feff",
              //边框颜色
              borderColor: "#7fc0de",
              //边框宽度
              borderWidth: 1,
            },
            emphasis: {
              // 选中样式
              borderWidth: 1,
              //高亮颜色
              areaColor: "#9fe8ed",
              label: {
                //显示文字
                show: true,
                textStyle: {
                  //鼠标移入的字体颜色
                  color: "black",
                },
              },
            },
          },
        },
        series: [
        //散点图根据json文件中的‘cp’字段对应坐标做定位（配合上一篇爬取json文件食用最佳）
          {
            name: "pm2.5",
            type: "scatter",
            symbol: "image://" + this.symbolUrl,
            symbolSize: 20,
            symbolOffset: [0, "80%"],
            center: [99.7129, 38.166],
            coordinateSystem: "geo",
            data: dataName,
            encode: {
              value: 2,
            },
            label: {
              position: "right",
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            itemStyle: {
              color: "rgb(128, 128, 128)",
            },
            // legendHoverLink: true,
          },
        ],
      };

      myChart.setOption(option);
      myChart.on("click", function (params) {
        console.log(params);
        //   点击下钻
        if (params.componentType == "geo") {
          that.queryName = params.name;
          if (that.cityOver.indexOf(that.queryName) == -1) {
            that.cityOver.push(params.name);
          }
          that.getJson(that.queryName);
        }
        // 散点图点击事件
        // else if (params.componentSubType == "scatter") {
        // }
      });

      //   点击空白上钻
      myChart.getZr().on("click", function (params) {
        if (params.target) {
        } else {
          if (that.cityOver.length > 1) {
            that.queryName = that.cityOver[that.cityOver.length - 2];
            that.cityOver.pop();
          } else {
            that.queryName = that.cityOver[0];
          }

          that.getJson(that.queryName);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
#main {
  height: 1000px;
  width: 1000px;
  //   background-color: pink;
}
</style>

成果图