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

Echarts版本是 echarts 4

研究了三天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. 右键返回上一级，数据出栈，重新渲染（不知道能不能实现想浏览器一样，单纯的返回上一个页面，而不需要重新渲染）

这里写图片描述

修bug TODO

[x] 异步加载数据，先渲染地图，ajax拿到数据后再渲染数据
[x] 下钻地图，+ 显示对应区域的数据
[x] 判断直辖市，二级下钻数据区分
[x] 修改样式， TODO 了解了修改样式的参数，可能还需要修改
[ ] 显示数据的环比、同比
[x] 上海区域地图缺失，莫名奇妙就修复了，应该把demo中完整的地图文件复制过来了
[ ] 地区数据百分比，百分比地图数据关联
[x] 地区数据按月份传递显示，叫后台改接口，添加传递年月参数，下一级接口相应的也加上参数
[x] 限制地图点击事件无限入栈，设置判断 if(mapStack < 2) {mapStack.push()}

过程中出现了两次人为错误
1. 写一个for循环的时候，判断条件漏写（红框），低级的语法错误，难怪一直提示 xxx undefined
2. 这里写图片描述
3. 另一个地方也是低级的逻辑错误，写错了字母
4.

添加功能
增加了图例选择功能，选择不同的数据类型，展示不同的数据。
1. 一开始的思路是想在原来的地图通通过 图例改变事件 的api 改变地图数据，来展示。
结果，实现逻辑太复杂，自己把自己绕晕了
2. 前辈知道，通过按钮链接跳转，copy4分地图，数据改变就可以了，get

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

添加了一个模态框，点击展示对应对应地区的月份数据
这里写图片描述

2018/3/27更新

实现地区数据排行条状图

知识点

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

果然是细节决定成败
要养成写代码注释的习惯，不然，代码多的时候，上文定义的变量，下文就忘记了，容易出错。

2018/4/17 更新

修bug TODO

[x] 异步加载数据，先渲染地图，ajax拿到数据后再渲染数据
[x] 下钻地图，+ 显示对应区域的数据
[x] 判断直辖市，二级下钻数据区分
[x] 修改样式， TODO 了解了修改样式的参数，可能还需要修改
[ ] 显示数据的环比、同比
[ ] 上海区域地图缺失
[ ] 地区数据百分比，百分比地图数据关联
[ ] 地区数据
[x] 直辖市下钻入栈判断，三级下钻入栈2次，直辖市只入栈一次，，避免出现入空栈
[x] 下一级地图排行榜联动
[x] 返回上一级，排行榜地图数据没有入栈，无法返回
- 数据不采用入栈的方式，通过出栈的数据重新排序渲染
[ ] 点击排行bar图，出现入空栈，导致出栈会有一次空栈
- bug原因出现在二级和三级的判断区别，把 bar 图的seriesName 改成当前的上一级的区域名字即可
[x] 左下角的色阶最大值改成拿到数据的最大值
- 排序后把最大的值拿出来，设为 colorMax
[ ] 添加图例“客户环比”、”销售额“、”销售环比“，
[ ] 新增需求，选择地区，显示每个地区的环比趋势曲线图，与平均值对比，要求可选地区，增加一条曲线
[x] 二级下钻又出现bug，暂时无法修复，原因是seriesName被改变了
- [x] bug别修复，把地图的name 改为传递的mapname 图例写死，不需要legend
[ ] 改变思路，放弃可选多个地区增加曲线，改为：只显示一个地区和平局曲线，用tooltip实现每个地区的月份趋势走向
[ ] 接口搞定后需要弄缓存，查询太慢我这边结果出来要很久
[x] 改为弹框形式弹出折线图，利用bootstrap 模态框
[x] 弹框无法显示折线图
- [x] 没有设置width；宽度为0，地图无法展示，修复
[x] 修改模态框和地图样式
[x] 用vue绑定地区数据，实现选择地区，渲染对应地区的曲线
- [x] 地区已绑定，数据没有对应展示
- [ ] 下一级地区折线展示没有完善
[x] 修改折线图按钮图标
[x] 4份地图配置变量冗余混乱，抽离出公共变量，放到一个配置文件
[ ] 返回右键返回上一级，折线图的展示数据没有对应入栈出栈绑定，会导致只能下钻能拿数据，返回上一级数据还停留在上一次的地图

拿数据过程出现的bug

//uncaught typeerror can read protecty 'id' of undefined
for (let i=0; res.msg.length; i++) {   
tmp2.push({
       id: res.msg[i].id,
       areaid: res.msg[i].areaid,
       name: res.msg[i].area,
       value: res.msg[i].num
   })
}

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

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

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

猜你喜欢