3分钟学会Echart地图下钻 （??金石瓜分计划强势上线，速戳上图了解详情??）??? 什么是地图下钻?地图下钻就是深入层级, 比如你当前地图上面显示了全国范围的行政区, 这时候点击了一个行政区, 地图就变成这个行政区的样子. 就像下面 ?? 实现思路初始化地图页面加载时，初始化 ECharts 实例，默认显示全国地图获取地图数据根据对应的行政区编码获取地图数据渲染地图使用 echarts.registerMap 注册当前区域地图。编写下钻逻辑监听地图点击事件，获取被点击区域的行政区代码和名称。获取到geojson后重新注册地图和更新Echarts?? 数据来源「DataV 地址」?? https://datav.aliyun.com/portal/school/atlas/area_selector?spm ?地图的 geo 数据是从dataV里面获取的 ?这串数字就是我们的行政区代码, 我只要修改行政区代码, 就可以获取到不同行政区的geojson数据 通过观察请求回来的 json 数据可以发现, 每个行政区都会带它的编码, 这样就很方便了, 只要每次点击地图的时候, 把对应地块的行政区代码获取到, 再重新请求即可. ? 最终效果?? 完整代码!DOCTYPEhtmlhtmllang="en"head metacharset="UTF-8"/ meta / title地图下钻/title style :root{ --primary:#1890ff; --primary-hover:#40a9ff; --bg:#f4f8fb; --radius:18px; --shadow:04px24px0rgba(24,144,255,0.08); } body{ margin:0; padding:0; font-family: Arial, sans-serif; background:var(--bg); min-height:100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .center-box{ display: flex; flex-direction: column; align-items: center; justify-content: center; width:100vw; height:100vh; } .map-container{ width:80vw; max-width:1200px; height:80vh; min-height:400px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: box-shadow0.3s; } #main{ width:100%; height:70%; border-radius:var(--radius); } .btn{ position: absolute; top:32px; left:32px; padding:10px28px; background-color:var(--primary); color:#fff; border: none; border-radius:6px; cursor: pointer; font-size:16px; font-weight:500; box-shadow:02px8px0rgba(24,144,255,0.12); transition: background0.2s, transform0.2s, box-shadow0.2s; z-index:10; } .btn:hover{ background-color:var(--primary-hover); transform:translateY(-2px)scale(1.04); box-shadow:04px16px0rgba(24,144,255,0.18); } @media(max-width:900px) { .map-container{ width:98vw; height:70vh; } .btn{ top:16px; left:16px; padding:8px18px; font-size:14px; } } @media(max-width:600px) { .map-container{ width:100vw; height:60vh; min-height:220px; } .btn{ top:8px; left:8px; padding:6px10px; font-size:13px; } } /style scriptsrc="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"/script script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js" integrity="sha512-XSmbX3mhrD2ix5fXPTRQb2FwK22sRMVQTpBP2ac8hX7Dh/605hA2QDegVWiAvZPiXIxOV0CbkmUjGionDpbCmw==" crossorigin="anonymous" referrerpolicy="no-referrer" /script/headbody divclass="center-box" divclass="map-container" divid="main"/div input type="button" class="btn" onClick="reutrnUp()" value="返回上一级" / /div /div script // 获取echartsDOM元素 constechartDOM =document.getElementById('main') constchart = echarts.init(echartDOM) letmenus = [ { adcode:100000, name:'全国' } ] /** * @function获取地区数据 * @param{number}adcode- 地区编码，默认为100000（全国） * */ constgetGeoJson=async(adcode =100000) = { try{ consturl =`https://geo.datav.aliyun.com/areas_v2/bound/${adcode}_full.json` constresult =awaitaxios.get(url) returnresult.data }catch(err) { returnvoid0 } } constupdateEcharts=async(adcode, name) = { // 默认获取全国行政区数据 constgeoJson =awaitgetGeoJson(adcode) if(!geoJson) { thrownewError('已经是最后一级了') } // 注册地图 echarts.registerMap(name, geoJson) // 设置地图配置项 constoption = { title: { text: name, left:'center' }, series: [ { type:'map', map: name, itemStyle: { areaColor:'#1890ff' }, data: geoJson['features'].map((item) ={ return{ name: item.properties.name, value: item.properties.adcode } }) } ] } // 设置图表配置项 chart.setOption(option) } updateEcharts(100000,'全国') // 点击行政区的时候,重新加载这个行政区的数据 chart.on('click',async(params) = { const{ value, name } = params.data if(value) { try{ awaitupdateEcharts(value, name) menus.push({ adcode: value, name }) }catch(err) { alert(err.message) } } }) // 返回上一级 constreutrnUp=async() = { if(menus.length1) { menus.pop() const{ adcode, name } = menus[menus.length-1] awaitupdateEcharts(adcode, name) }else{ menus = [ { adcode:100000, name:'全国' } ] awaitupdateEcharts(100000,'全国') alert('已经是最开始一级了。') } } /script/body/html 过渡动画的实现地图切换的过渡动画放在这篇文章里面?? 标题：echarts5 实现地图过渡动画 链接：juejin.cn/post/7533853983913164835 AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文