這篇文章主要介紹了vue中使用Echarts?map圖實(shí)現(xiàn)下鉆至縣級(jí),需要注意的是，因?yàn)槲沂侵苯訌?vue-cli2?直接跳到?vue-cli4?，還奇怪怎么讀取不到JSON，查找后才知道?vue-cli3?往后的項(xiàng)目基礎(chǔ)架構(gòu)對(duì)比舊版本有些區(qū)別，感興趣的朋友跟隨小編一起看看吧

今天給大家分享echarts map地圖下鉆至縣級(jí)，因?yàn)轫?xiàng)目需求需要實(shí)現(xiàn) map 圖下鉆至縣級(jí)，也找了很多博客，但是基本都是同一篇博客。

好在最終還是實(shí)現(xiàn)了，先上動(dòng)圖：

基本思路都是一致的，獲取鼠標(biāo)點(diǎn)擊的參數(shù)跳轉(zhuǎn)至指定的 JSON

需要注意的是，因?yàn)槲沂侵苯訌?vue-cli2 直接跳到 vue-cli4 ，還奇怪怎么讀取不到JSON，查找后才知道 vue-cli3 往后的項(xiàng)目基礎(chǔ)架構(gòu)對(duì)比舊版本有些區(qū)別。

以前大家都習(xí)慣在根目錄下的 static文件夾下創(chuàng)建 JSON 文件，vue-cli3、4沒有 static文件夾了，創(chuàng)一個(gè) static文件夾在下面也不行，結(jié)果會(huì)報(bào)錯(cuò)，請(qǐng)求 404找不到文件。

正確的路徑是在 public 文件夾下引入

話不多說(shuō)，步驟如下：

　　1 - 首先初始化全國(guó) map

initEcharts("china");
      function initEcharts(map) {
        let option = {
          geo: {
            map: map,
            roam: false,
            scaleLimit: {
              min: 1.2,
              max: 3
            },
            zoom: 1.2,
            //圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息
            label: {
              normal: {
                show: true,
                fontSize: "10",
                color: "rgba(0,0,0,0.7)"
              }
            },
            //地圖區(qū)域的多邊形 圖形樣式，有 normal 和 emphasis 兩個(gè)狀態(tài)
            itemStyle: {
              //normal 是圖形在默認(rèn)狀態(tài)下的樣式；
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"
              },
              //emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r。
              emphasis: {
                areaColor: "#F3B329",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          series: [
            {
              name: "信息量",
              type: "map",
              //這里是'china',及因?yàn)閖s中注冊(cè)的名字，如果是上海市，則該出需pName 指的是'shanghai'
              mapType: map,
              geoIndex: 0
              // data: dataList
            }
          ]
        };
        myChart.setOption(option);
      }

　　2 - 定義省份及市區(qū)數(shù)組，由于太長(zhǎng)了我就不放了（后面需要引用對(duì)應(yīng)的JSON，這些 JSON 和源碼我會(huì)打包到 github ，需要自取）

　　3 - 點(diǎn)擊事件

// 點(diǎn)擊觸發(fā)
      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

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

寫在最后：

　　代碼有很多還需要優(yōu)化的地方，但是暫解了我的燃眉之急，畢竟我還是個(gè)畢業(yè)不久的切圖仔，源碼放在下面，希望能幫到大家 ----https://github.com/RuanChon/mapChart

到此這篇關(guān)于vue中使用Echarts map圖實(shí)現(xiàn)下鉆至縣級(jí)的文章就介紹到這了,更多相關(guān)vue Echarts map圖下鉆至縣級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: