利用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文件資源請評論裏留言或私信我。