利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果(真实项目中亲测有效~)

前言

在使用echarts进行数据可视化开发的过程中，我们常常会遇到各种问题，比如说：echarts中的map地图相关js，json文件资源缺失，或者说想实现在显示中国地图的map中区域划分到市级级别，地图轮廓最小划分为市级，像这种案例，官方文档上也没有相关配置或API的讲解，只能靠自己摸索了，网上一百度，找了好久，全是无关没用的信息，最终还是得自己来解决；不过还好，最终这些问题经过不懈努力都解决了，后面我也会给出上面所说问题的文件资源及解决方案。(ps: 估计网上你们也找不到一篇和这问题有关的有用的文章，估计这是唯一真正解决目标问题的文章，哈哈哈哈哈~)

正文

先看简单实现的效果图：

实现这种中国地图上市级级别显示效果的关键：

1. json文件的准确导入：china-cities.json文件的导入
核心代码：import chinaCityJson from "@/data/china-cities.json";

ps: (路径写自己导入文件所在项目中的位置即可，此处只是我这边自己的路径，仅供参考。文档上及大多数人都是使用$.get()方法去使用的，其实在vue中直接导入也可以的，但后面要注册，即第二个关键点)

json文件资源下载链接：china-cities.json

2. 地图注册：this.$echarts.registerMap("china", chinaCityJson);

ps:（这里 this.$echarts的使用是因为在main.js中全局已经注册过了 Vue.prototype.$echarts = echarts ，所以可以直接使用，不过看个人情况，也可以组件内部单独导入echarts并使用，如 import echarts from 'echarts' ，echarts.registerMap("china", chinaCityJson)，这种也可以使用）

注意：如果第一点那里使用的不是json文件，而是导入的js文件，则第二点的注册一行代码this.$echarts.registerMap("china", chinaCityJson)也就不需要了。

其他剩下的都和平时正常开发使用echarts差不多一样了，部分重要代码如下所示：

	let options = {
        title: {},
        dataset: {
          source: this.data
        },
        tooltip: {
          textStyle: {
            fontSize: nowSize(14)
          },
          formatter: "{b}"
        },
        series: [
          {
            type: "map",
            map: "china",
            itemStyle: {
              areaColor: "#3d5372",
              borderColor: "#6a7a93",
              borderWidth: 1
            },
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                areaColor: "#3d5372"
              }
            }
          }
        ]
      };
      this.$echarts.registerMap("china", chinaCityJson);

      let dom = this.$echarts.init(this.$refs.dom);
      dom.setOption(options);

基本上官方文档上配置项手册里都可以找到，具体情况具体看，根据个人情况查看官方文档进行开发使用即可：echarts官方文档配置项手册

其他相关map的js及json文件资源请评论里留言或私信我。