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 + "
" + 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中写“江西”则无法得到想要的地图。需将他们改成一致的才能显示出来。