摘要：實(shí)現(xiàn)省與中國(guó)地圖之間的切換數(shù)據(jù)可視化這東西到處都需要使用或早或晚這東西都要接觸到自然地圖和可視化結(jié)合在一起也是早晚的需求雖然地圖之間的切換只是一個(gè)很小的功能但說(shuō)不定什么時(shí)候就要用到現(xiàn)在看一看里面的坑也是好的效果差不多就是這樣點(diǎn)擊省切換到省

數(shù)據(jù)可視化這東西到處都需要使用,或早或晚echats這東西都要接觸到,自然地圖和可視化結(jié)合在一起也是早晚的需求,雖然地圖之間的切換只是一個(gè)很小的功能,但說(shuō)不定什么時(shí)候就要用到,現(xiàn)在看一看里面的坑也是好的!

點(diǎn)擊省 -> 切換到省 -> 再點(diǎn)切換到中國(guó)地圖

// console.log("start")

import echarts from "echarts"
import china from "echarts/map/js/china"
// import sichuan from "echarts/map/js/province/sichuan"
// import anhui from "echarts/map/js/province/anhui"

//定義全國(guó)省份的數(shù)組
let provinces = ["shanghai", "hebei","shanxi","neimenggu","liaoning","jilin","heilongjiang","jiangsu","zhejiang","anhui","fujian","jiangxi","shandong","henan","hubei","hunan","guangdong","guangxi","hainan","sichuan","guizhou","yunnan","xizang","shanxi1","gansu","qinghai","ningxia","xinjiang", "beijing", "tianjin", "chongqing", "xianggang", "aomen", "taiwan"]
 
let provincesText = ["上海", "河北", "山西", "內(nèi)蒙古", "遼寧", "吉林","黑龍江",  "江蘇", "浙江", "安徽", "福建", "江西", "山東","河南", "湖北", "湖南", "廣東", "廣西", "海南", "四川", "貴州", "云南", "西藏", "陜西", "甘肅", "青海", "寧夏", "新疆", "北京", "天津", "重慶", "香港", "澳門", "臺(tái)灣"]

// 初始化echarts
let map = echarts.init(document.getElementById("map"))
// console.log(map)

// 定義初始加載的地圖區(qū)域,中國(guó)地圖
let selected = "china"

// 定義加載地圖的方法
// 參數(shù)為要顯示地圖區(qū)域的名字
let loadMap = (param) => {
  map.setOption({
    geo: {
      // map: "china" | "四川"
      // 必須要先引入了對(duì)應(yīng)地圖的js文件或者json文件，在這一步的時(shí)候，echarts會(huì)自動(dòng)將對(duì)應(yīng)的JS文件注入，地圖才會(huì)顯示.
      map: param
    }
  })
}

// 第一次加載地圖
loadMap(selected)

// 判斷當(dāng)前要加載的地圖是不是??？
let isProvince = (name) => {
  return provincesText.some((province) => {
    return province === name
  })
}

// 定義方法加載某個(gè)省的地圖文件
let loadScriptMap = (name, callback) => {
  // 獲取這個(gè)省的拼音名字 name = "四川" => pinyinName = "sichuan"
  let pinyinName = provinces[provincesText.indexOf(name)]
  console.log(pinyinName)
  // 引入這個(gè)對(duì)應(yīng)的地圖JS，如果是在項(xiàng)目中要打包，請(qǐng)將這些文件提取出來(lái)，放在靜態(tài)資源中
  // build的時(shí)候這些文件不會(huì)被打包，無(wú)可加載資源地圖是不會(huì)顯示的?。。?！
  let currentMap = require(`echarts/map/js/province/${pinyinName}`)
  callback(name)
}

// 監(jiān)聽(tīng)地圖點(diǎn)擊事件
map.on("click", (ev) => {
  // 如果點(diǎn)擊的是一個(gè)省，那就切換到這個(gè)省的地圖
  if (isProvince(ev.name)) {
    selected = ev.name
    console.log(selected)
    // 從外部加載這個(gè)省的地圖文件
    loadScriptMap(ev.name, loadMap)
  } else {
    // 否則切換中國(guó)地圖
    selected = "china"
    loadMap(selected)
  }
})

1.要渲染地圖,需要地圖對(duì)應(yīng)的js或json文件,在echart包里面,要顯示省的地圖的話也需要相對(duì)應(yīng)的sichuan.js,并不是一個(gè)china.js就可以搞定的!

2.要顯示中國(guó)地圖需要map: "china",這是很明顯的暗示,那要顯示某個(gè)省的地圖按道理就該這樣寫 map: "sichuan",然而這樣就錯(cuò)了,你必須要這樣 map: "四川",你需要寫漢字

最后要是有朋友想要參考一下github