Echartsapp开发定制公司画中国地图

app开发定制公司获取中国地图的json：
链接:
打开来链接，如图所示：

点击此处即可下载中国地图的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

效果图：

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