Echarts画中国地图 , 如何获取中国地图和各省地图的json数据的方法

Echarts画中国地图

获取中国地图的json：
链接: link
打开来链接，如图所示：

点击此处即可下载中国地图的json数据：

若想要获取各省的json数据：
只需要在中国地图上点击该省，如图点击江西省：

便可以跳到江西省，点击如图所示的位置便可以得到江西省的json数据：

Echarts画中国地图实例：

<template>
  <div>
    <div class="mapChart" id="mainChart" :style="dHeight"></div>
  </div>
</template>

<script>
import china from "../assets/json/china.json";
export default {
     
  name: "PieChart",
  data() {
     
    return {
     
      dHeight: {
     
        height: "",
      },
    };
  },
  methods: {
     
    //定义方法，获取高度减去头尾
    getHeight() {
     
      this.dHeight.height = window.innerHeight - 80 + "px";
    },
  },
  created() {
     
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  mounted() {
     
    const myChart = this.$echarts.init(document.getElementById("mainChart"));
    this.$echarts.registerMap("china", china);
    this.$axios.get("https://4951ee4868.oicp.vip/loc/").then((res) => {
     
      // console.log("mapData", res);
      let option = {
     
        title: {
     
          text: "发货地分布情况",
          top:"10px",
          left: "center",
          textStyle: {
     
            color: "white",
          },
        },

        tooltip: {
     
          formatter: function (params) {
     
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          }, //数据格式化
        },
        visualMap: {
     
          min: 0,
          max: 2000,
          // left: "10px",
           left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          textStyle: {
     
            color: "white",
          },
          inRange: {
     
            color: ["#e0ffff", "rgba(0,60,153,0.8)"], //取值范围的颜色
          },
          show: true, //图注
        },
        geo: {
     
          map: "china",
          roam: false, //不开启缩放和平移
          zoom: 1.23, //视角缩放比例
          label: {
     
            normal: {
     
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
     
            normal: {
     
              // borderColor: "rgba(0, 0, 0, 0.2)",
              //  areaColor: 'rgba(0,60,153,0.8)',
              borderColor: "#02c0ff",
            },
            emphasis: {
     
              areaColor: "#F3B329", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
     
            name: "店铺数量",
            type: "map",
            geoIndex: 0,
            data: res.data,
          },
        ],
      };

      myChart.setOption(option);
    });

    window.addEventListener("resize", function () {
     
      myChart.resize();
    });
  },
};
</script>

<style>
.mapChart{
     
  background-color: #182c4d;

}
</style>

效果图：

注意：千万千万要注意的是，下载的json数据文件中的省、市、县的名字需要和series中data中的省、市、县的名字一摸一样。如：json文件中写的是“江西省”，而series中data中写“江西”则无法得到想要的地图。需将他们改成一致的才能显示出来。