js——根据文件链接获取文件名——基础积累

根据文件链接获取文件名：

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
}