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

Echarts版本是 echarts 4
有问题的小伙伴可以加群交流:475870039

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

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


2018/3/26 更新

  1. 修改样式,根据色阶数值地图块显示不同的颜色
  2. 按月份筛选数据,日期插件是原生的html5 input date
  3. 每个对应区域的下一级同样按筛选月份显示数据
  4. 实现右键返回
    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
	})
})

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

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

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


添加功能
增加了图例选择功能,选择不同的数据类型,展示不同的数据。

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

Echarts实现地图下钻+对应区域数据展示+右键返回上一级_第3张图片
这个效果体验不好,不要了,再修改

添加了一个模态框,点击展示对应对应地区的月份数据
Echarts实现地图下钻+对应区域数据展示+右键返回上一级_第4张图片


2018/3/27更新

实现地区数据排行条状图

知识点

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

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


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

地图下钻demo代码: https://github.com/touxing/echarts3-chinese-map-drill-down.git
更新(2019-05-20)上传mock数据
更新(2019-08-12)接入本地mock数据,线上预览地址 由于线上无法读取目录文件列表,只能展示第一级数据,完整数据展示课下载demo本地运行,注意看 README.md 文件

可加群交流

你可能感兴趣的:(JavaScript,echarts)