#main{宽度：100%;高度：100%；}.back{位置：绝对；顶部：0；left:20px;}前言之前的一个项目需要在内网部署。这时候，高德需要借助代理。在公司申请代理资源极其繁琐（手动狗头）。其中地图部分被echarts替代，部分功能也发生了一些变化。如下图，定位搜索改为点击下钻。本文具体讲Echarts多级下钻返回功能的实现过程===>创建初始化地图===>点击获取下一层地图数据===>记录地图的层级在每一步===>返回上一层实现1.创建初始地图，使用echarts绘制地图。方法有两种，一种是通过js，一种是json，这里我们通过json文件绘制从echart的文档中，我们使用geo和series在echart中绘制地图。它们之间有细微的差别，可以忽略不计。创建一个函数并调用onMounted(()=>{getAreaCounty('邵阳市')})constgetAreaCounty=(name)=>{//我从后台获取json数据的接口函数apiAreaCounty({parent:name}).then((res)=>{//获取绘图容器mychart=echarts.init(chart.value)//绘制地图initEcharts(res,name,mychart)mychart.on('click',(params)=>{//点击下钻的操作写在这里})})}constinitEcharts=(geoJson,name,mychart)=>{echarts.registerMap(name,geoJson)letoption={series:[{show:true,type:'map',map:name,itemStyle:{areaColor:'#1890ff'}}]}mychart.setOption(option)}2。点击获取下一层地图数据constgetAreaCounty=(name)=>{//I后台获取json数据的接口函数apiAreaCounty({parent:name}).then((res)=>{//获取绘图容器mychart=echarts.init(chart.value)//绘制地图initEcharts(res,name,mychart)mychart.on('click',(params)=>{//点击下钻的操作这里写的是从params或者从全局变量中获取每一层数据所需要的参数或者判断条件/读入函数传参apiAreaCounty({parent:params.name}).then((res)=>{initEcharts(res,params.name,mychart)})})})}3.记录每一步地图的层级这一步是多层下钻返回的关键是将每次点击发起的不同请求的参数保存成一个数组，每一步返回，读取最后一组保存的参数发起新的请求，并移除数组中的这组数据true,type:'map',map:name,itemStyle:{areaColor:'#1890ff'}}]}mychart.setOption(option)if(flag){mapStack.push({name:lastName,//传入的参数请求级别：lastLevel//请求中传递的参数})lastName=namelastLevel=level}}4.返回上一个绑定点击returneventfunctiononBack(){if(mapStack.length!=0){//如果有上层目录就执行letmap=mapStack.pop();apiAreaCounty({parent:map.name},map.level).then((res)=>{initEcharts(res,map.name,mychart,map.level,false)lastLevel=map.levellastName=map.name})}}完成生成代码
