根据文件链接获取文件名:
function getFilenameFromUrl(url) {
const pathname = new URL(url).pathname;
const index = pathname.lastIndexOf('/');
return (-1 !== index) ? pathname.substring(index + 1) : pathname;
}
echarts
地图下钻
地图下钻其实就是,在地图的点击事件回调中,加载了另一份地图的json并注册地图,然后再setOption中更改了地图名字。
chart.on('click', (params) => {
if (params.componentSubType == 'map') {
goDown(params.name)
}
})
//用来存放当前的地图名字
let currentName = ''
//用来存放下钻的历史记录
let history = []
async function goDown(name){
//获取地图数据之后,修改地图options
const mapname = name
if (!echarts.getMap(name)) {
const newMapJson = await getMapJson(name)
echarts.registerMap(mapname, newMapJson)
}
options.geo.map = mapname
options.series[0].map = mapname
//然后重新绘制地图
history.push(currentName)
chart.setOption(this.options)
currentName = name
}
async function getMapJson(name) {
const jsonData = await import('./map/'+name+'.json')
return jsonData.default
}
echarts
地图回钻实现
刚刚在下钻时保存了名字和历史记录,所以回钻就是把历史记录中的最后一项弹出
function returnUpLevel() {
//先判断history有没有数据,能不能返回
if(history.length == 0){
return false
}
//取出要返回的那个名字
const name = history.pop()
const currentJson = echarts.getMap(mapname).geoJson
//修改地图配置重新绘制地图
options.geo.map = mapname
options.series[0].map = mapname
chart.setOption(options)
//修改当前的层级,名字
currentName = name
}