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