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

Echarts版本是echarts 4

有问题的朋友可以加QQ群交流：475870039

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

对于后续的更新研究过程，建议想要使用echarts的朋友先阅读官方文档和示例，不要盲目去做。 前一天我正在向地图添加数据进行显示，已经折腾了三天了，但我还没弄清楚为什么。 看了半天文档，又研究了例子echarts 大量数据，终于搞清楚了数据的显示。 下一步就是绑定数据了，开心。

2018/3/26 更新

修改样式，根据亮度值图块显示不同的颜色，并按月份过滤数据。 日期插件是原生的html5输入日期。 Storm myChart.on('contextmenu', ()=>{}) 去除浏览器默认右键菜单+echarts右键storm

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
	})
})

右键返回需要利用栈来实现，当点击地图进入下一层时，将当前渲染的数据放入栈中，右键返回上一层时，将数据弹出堆栈，并重新渲染（不知道是否可以像浏览器一样实现，直接返回上一页，无需重新渲染）

添加功能

增加图例选择功能，可以选择不同的数据类型，显示不同的数据。

一开始的想法是通过图例更改API更改地图数据来显示原始地图。

结果实现逻辑太复杂，自己都搞糊涂了。 经过大师的指导echarts 大量数据，我可以通过按钮链接跳转，复制4张地图，更改数据。 得到

疗效体验不好，不想要了，换吧

新增模态框，点击显示对应地区对应的月度数据

2018年3月27日更新

实现区域数据排名框图

知识点

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);
       }
     );
   }
 });
}

地图钻取演示代码：