Echarts实现地图下钻+对应区域数据展示+右键返回上一级

全栈程序员-站长 • 2026年3月19日下午9:37 • 未分类 • 阅读 3

研究了三天Echarts，终于实现了基于Echarts 实现地图下钻至县区，加对应区域的数据展示。先看效果图

在这里插入图片描述

后续更新研究的过程，建议要想使用用echarts的同学先去看官方文档和示例，不要盲目的去搞。我前一天在弄数据添加到地图上展示，自己在瞎搞了一天，也没搞出过所以然来。后来去看了半天文档，对着示例研究，终于把数据展示弄清楚了。接下来就是绑定数据就可以了，开心。

2018/3/26 更新

修改样式，根据色阶数值地图块显示不同的颜色
按月份筛选数据，日期插件是原生的html5 input date
每个对应区域的下一级同样按筛选月份显示数据
实现右键返回
1. 查找了 echarts 官方api文档，鼠标事件 myChart.on('contextmenu', ()=>{})
2. 去掉浏览器默认右键菜单 + echarts右键事件

let canvas = document.getElementsByTagName("body") canvas.oncontextmenu = function(){ 
    return false;} myCharts.on('contextmenu,function(params){ 
     //鼠标右键事件，显示右键返回上一级 $('#context-menu').css({ 
     left: params.event.offsetX, top: params.event.offsetY }) })

在这里插入图片描述

右键返回需要用到栈来实现
1. 点击地图进入下一级的时候，把当前渲染好的数据入栈
2. 右键返回上一级，数据出栈，重新渲染（不知道能不能实现想浏览器一样，单纯的返回上一个页面，而不需要重新渲染）

这里写图片描述

一开始的思路是想在原来的地图通通过 图例改变事件 的api 改变地图数据，来展示。
结果，实现逻辑太复杂，自己把自己绕晕了
经前辈指导，通过按钮链接跳转，copy4份地图，数据改变就可以了，get

这里写图片描述
这个效果体验不好，不要了，再修改

2018/3/27更新

实现地区数据排行条状图

知识点

数据排序
数据渲染，关联
当前数据入栈与出栈
封装公共的部分代码
更新修bug表

在这里插入图片描述

2018/4/17 更新

部分参考代码，右键点击地图事件，地图下钻

chart.on("click", function(params) { 
         //隐藏右键返回菜单 $("#contextMenu").hide(); let tmpObj = { 
        }; let d = []; if (params.name in provinces) { 
         //二级直辖市数据渲染 if (special.indexOf(params.name) >= 0) { 
         let postData2 = { 
         parentid: "provinceid", value: params.data.id }; Promise.all([ajaxRequest(getCityNumberUrl, searchtime, postData2)]).then( result => { 
         let [curMonthResult, lastMonthData] = result; let tmp = []; if (curMonthResult.errcode == 1) { 
         getAreaNumber( params.name, curMonthResult.msg[0].cityid, searchtime ); } }, error => { 
         console.log("请求市级数据失败", e); } ); } //如果点击的是34个省、市、自治区，绘制选中地区的二级地图 $.getJSON(provinceJson + provinces[params.name] + ".json", function( data ) { 
         echarts.registerMap(params.name, data); for (var i = 0; i < data.features.length; i++) { 
         d.push({ 
         name: data.features[i].properties.name }); } renderMap(params.name, d); if (params.data.id !== "undifiend") { 
         getCityNumber(params.name, params.data.id, searchtime, data); } }); } else { 
         //显示县级地图 $.getJSON(cityJson + cityMap[params.name] + ".json", function( data ) { 
         echarts.registerMap(params.name, data); let d = []; for (var i = 0; i < data.features.length; i++) { 
         d.push({ 
         name: data.features[i].properties.name }); } renderMap(params.name, d); if (params.data.cityid) { 
         let postData3 = { 
         parentid: "cityid", value: params.data.cityid }; Promise.all([ ajaxRequest(getAreaNumberUrl, searchtime, postData3) ]).then( result => { 
         let [curMonthResult, lastMonthData] = result; let tmp = []; if (curMonthResult.errcode == 1) { 
         // console.log('204', res.msg[0].cityid, res.msg[0].city) //这里传递的城市名有问题“北京市”，渲染地图的名字是“北京”，所以地图名要用原来的名字渲染 getAreaNumber(params.name, params.data.cityid, searchtime); } }, error => { 
         console.log("请求市级数据失败", e); } ); } }); }