echarts 实现省与中国地图之间的切换
数据可视化这东西到处都需要使用, 或早或晚 echats 这东西都要接触到, 自然地图和可视化结合在一起也是早晚的需求, 虽然地图之间的切换只是一个很小的功能, 但说不定什么时候就要用到, 现在看一看里面的坑也是好的!
效果差不多就是这样
点击省 -> 切换到省 -> 再点切换到中国地图
代码
// 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’
// 定义全国省份的数组
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 = [‘ 上海 ’, ‘ 河北 ’, ‘ 山西 ’, ‘ 内蒙古 ’, ‘ 辽宁 ’, ‘ 吉林 ’,’ 黑龙江 ’, ‘ 江苏 ’, ‘ 浙江 ’, ‘ 安徽 ’, ‘ 福建 ’, ‘ 江西 ’, ‘ 山东 ’,’ 河南 ’, ‘ 湖北 ’, ‘ 湖南 ’, ‘ 广东 ’, ‘ 广西 ’, ‘ 海南 ’, ‘ 四川 ’, ‘ 贵州 ’, ‘ 云南 ’, ‘ 西藏 ’, ‘ 陕西 ’, ‘ 甘肃 ’, ‘ 青海 ’, ‘ 宁夏 ’, ‘ 新疆 ’, ‘ 北京 ’, ‘ 天津 ’, ‘ 重庆 ’, ‘ 香港 ’, ‘ 澳门 ’, ‘ 台湾 ’]
// 初始化 echarts
let map = echarts.init(document.getElementById(‘map’))
// console.log(map)
// 定义初始加载的地图区域, 中国地图
let selected = ‘china’
// 定义加载地图的方法
// 参数为要显示地图区域的名字
let loadMap = (param) => {
map.setOption({
geo: {
// map: ‘china’ | ‘ 四川 ’
// 必须要先引入了对应地图的 js 文件或者 json 文件，在这一步的时候，echarts 会自动将对应的 JS 文件注入，地图才会显示.
map: param
}
})
}
// 第一次加载地图
loadMap(selected)
// 判断当前要加载的地图是不是省？
let isProvince = (name) => {
return provincesText.some((province) => {
return province === name
})
}
// 定义方法加载某个省的地图文件
let loadScriptMap = (name, callback) => {
// 获取这个省的拼音名字 name = ‘ 四川 ’ => pinyinName = ‘sichuan’
let pinyinName = provinces[provincesText.indexOf(name)]
console.log(pinyinName)
// 引入这个对应的地图 JS，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
// build 的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
let currentMap = require(`echarts/map/js/province/${pinyinName}`)
callback(name)
}
// 监听地图点击事件
map.on(‘click’, (ev) => {
// 如果点击的是一个省，那就切换到这个省的地图
if (isProvince(ev.name)) {
selected = ev.name
console.log(selected)
// 从外部加载这个省的地图文件
loadScriptMap(ev.name, loadMap)
} else {
// 否则切换中国地图
selected = ‘china’
loadMap(selected)
}
})
坑
1. 要渲染地图, 需要地图对应的 js 或 json 文件, 在 echart 包里面, 要显示省的地图的话也需要相对应的 sichuan.js, 并不是一个 china.js 就可以搞定的!
2. 要显示中国地图需要 map: ‘china’, 这是很明显的暗示, 那要显示某个省的地图按道理就该这样写 map: ‘sichuan’, 然而这样就错了, 你必须要这样 map: ‘ 四川 ’, 你需要写汉字
最后要是有朋友想要参考一下 github