vue項目引用echarts 中國地圖、省、市下鑽實現

功能描述：中國地圖下鑽-省-市

邏輯原理： 初始化中國地圖，利用地圖點擊事件設置map配置到省或者市

難點：源碼沒有市級別的json，增加了下鑽第三級的難度

解決方式：下載json資源，引入並重新注冊地圖

版本：4.2.0-rc.2

備注：尚未了解新版本是否含市級別的json文件

l前戲了解：

源碼地圖了解 ===>路徑：echarts->map-> js/json 文件夾

中國地圖：import 'echarts/map/js/china' 

廣東地圖:   import 'echarts/map/js/province/guangdong'

（為什么是這個路徑，你嘗試打開源碼就明白了 ）

 

||正題切入：

開始顯示地圖 設置series的map：‘china’，具體實現地圖的源碼可以參考我的另一篇文章 https://www.cnblogs.com/yflbk-2016/p/13596124.html

             

 

點擊到省級別實現原理很簡單的，series的map：'廣東' 即可，注意不是英文'guangdong'，原因可以看到源碼js文件。注冊寫着中文

　　　　　　　　

效果圖

　         　

 

代碼切換實現

// name 全局變量，保存當前地圖的名稱
var name = 'china'

// 點擊事件
myChart.on('click', (params) => {
          name = params.name 
          this.render() // 重新渲染地圖的方法
        })
// option設置
 series:的 map: name

 

|||難點：點擊到市級別，源碼不支持了

源碼中也發現除了到省就沒有市等更細級別的json文件了，那只好網上資源下載，參考鏈接http://datav.aliyun.com/tools/atlas/#&lat=22.890161256069373&lng=113.42393600000004&zoom=7

 

1.搜索功能

2.含有子區域的json文件路徑，可以直接打開查看內容復制粘貼，那就不需要下載；說明：第一個路徑沒有full結尾的就是不含子區域的路徑，不含子區域指就是中間沒有界限，看不到具體內容，就一個殼（一般沒有人會用個輪廓吧）

3.直接把json文件下載

 

 

 下載好的文件放到靜態資源里（湛江市為例）

　　　　

 

 

在上一段代碼on事件中間加代碼，利用axios請求靜態資源獲取到json

 

 // 代碼內容

if (params.name === '湛江市') {
            axios.get('./static/440800.json').then(res => {
              const getJson = res.data
              echarts.registerMap(params.name, getJson)

　　　　　　　　 this.resizeChart() // resize 圖形功能方法

            })
          }

點擊下鑽效果

　　　  　

 總結：以上設置即可實現下鑽效果，暫時無測試數據，功能細節也不算很全，比如添加返回等功能,后期有空補上~

 

======添加返回上一級功能

初始化:上面提到的字符串name變量改成數組變量  var nameArr = ['china']，默認含有中國地圖，series的map或geo的map更改為map:nameArr[nameArr.length - 1]

下鑽：每次點擊添加 nameArr.push(params.name)

返回：nameArr.pop()

已測

 ending....