今天給大家分享echarts map地圖下鑽至縣級，因為專案需求需要實現 map 圖下鑽至縣級，也找了很多部落格，但是基本都是同一篇部落格。

好在最終還是實現了，先上動圖：

基本思路都是一致的，獲取滑鼠點選的引數跳轉至指定的 ON

需要注意的是，因為我是直接從 -cli2 直接跳到 vue-cli4 ，還奇怪怎麼讀取不到JSON，查詢後才知道 vue-cli3 往後的專案基礎架構對比舊版本有些區別。

以前大家都習慣在根目錄下的 static資料夾下建立 JSON 檔案，vue-cli3、4沒有 static檔案夾了，創一個 static資料夾在下面也不行，結果會報錯，請求 404找不到檔案。

正確的路徑是在 public 資料夾下引入

話不多說，步驟如下：

　　1 - 首先初始化全國 map

initEcharts("china");
      function initEcharts(map) {
        let option = {
          geo: {
            map: map,roam: false,scaleLimit: {
              min: 1.2,max: 3
            },zoom: 1.2,//圖形上的文字標籤，可用於說明圖形的一些資料資訊
            label: {
              normal: {
                show: true,fontSize:
 
 "10",color: "rgba(0,0.7)"
              }
            },//地圖區域的多邊形 圖形樣式，有 normal 和 emphasis 兩個狀態
            itemStyle: {
              //normal 是圖形在預設狀態下的樣式；
              normal: {
                borderColor: "rgba(0,0.2)"
              },//emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
              emphasis: {
                areaColor: "#F3B329",fCFcIGJzP
 
      shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0,0.5)"
              }
            }
          },series: [
            {
              name: "資訊量",type: "map",//這裡是'china',及因為js中註冊的名字，如果是上海市，則該出需pName 指的是'shanghai'
              mapType: map,geoIndex: 0
              // data: dataList
            }
          ]
        };
        myChart.setOption(option);
      }

　　2 - 定義省份及市區陣列，由於太長了我就不放了 （後面需要引用對應的JSON，這些 JSON 和原始碼 我會打包到 ，需要自取）

　　3 - 點選事件

// 點選觸發
      myChart.on("click",param => {
        if (param.name in provinces) {
          // 處理省模組
          let names = param.name;
          for (let key in provinces) {
            if (names == key) {
              showProvince(provinces[key],key);
              break;
            }
          }
        } else if (param.name in cityMap) {
          // 處理市模組
          let names = param.name;
          for (let key in cityMap) {
            if (names == key) {
              showCitys(cityMap[key],key);
              break;
            }
          }
        }
      });

　　4 - 渲染 map

//展示對應的省
      function showProvince(eName,param) {
        console.log(eName,param)
        $.getJSON(`/map/province/${eName}.json`,data=>{
          that.$echarts.registerMap(param,data);
          alert("省")
          initEcharts(param);
        })
      }
      //展示對應市
      function showCitys(cName,param) {
        console.log(cName,param)
        // 顯示縣級地圖
        $.getJSON(`/map/city/${cName}.json`,data);
          alert("縣")
          initEcharts(param);
        })
      }

寫在最後：

　　程式碼有很多還需要優化的地方，但是暫解了我的燃眉之急，畢竟我還是個畢業不久的切圖仔，原始碼放在下www.cppcns.com面，希望能幫到大家 ----https://github.com/RuanChon/mapChart

到此這篇關於vue中使用Echartsmap圖實現下鑽至縣級的文章就介紹到這了,更多相關vueEchartsmap圖下鑽至縣級內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！