echart 地图数据封装

根据需求前端要实现一个echart地图效果，并且要对数据前十名地区进行排名，效果图如下：

后端接口数据返回的格式：

返回的格式是对应的地区编码及数量，

echart地图的数据展示要求的格式，

接下来我们要对数据进行分装，

可以看到后端返回的数据，只有地区码，所以我们首先要按照地区码进行归类，相同码值的count相加，，

我按照码值的前两位相同定义了一个数组。


{"32":{"name": "江苏省","value": 0
},"11":{"name": "北京市","value": 0},"31":{"name": "上海市","value": 0},"50":{ "name": "重庆市","value":0 },"13": {"name": "河北省","value":0 }
,"41":{ "name": "河南省","value":0 }
,"53":{ "name": "云南省","value":0 }
,"21":{ "name": "辽宁省","value":0 }
,"23":{ "name": "黑龙江省","value":0 }
,"43": { "name": "湖南省","value":0 }
,"34":{"name": "安徽省","value":0 }
,"37":{ "name": "山东省","value":0 }
,"65":{ "name": "新疆维吾尔自治区","value":0 }
,"33":{  "name": "浙江省","value":0 }
,"36":{ "name": "江西省","value":0 }
,"42":{"name": "湖北省","value":0 }
,"45": {"name": "广西壮族自治区","value":0 }
,"62":{"name": "甘肃省","value":0 }
,"14":{"name": "山西省","value":0 }
,"15":{"name": "内蒙古自治区","value":0}
,"61":{"name": "陕西省","value":0 }
,"22":{"name": "吉林省","value":0 }
,"35":{ "name": "福建省","value":0 }
,"52":{ "name": "贵州省","value":0 }
,"44":{ "name": "广东省","value":0 }
,"63":{ "name": "青海省","value":0 }
,"54":{ "name": "西藏自治区","value":0 }
,"51":{"name": "四川省","value":0 }
,"12":{"name": "天津市","value":0 }
,"64":{"name": "宁夏回族自治区","value":0}
,"46":{ "name": "海南省","value":0 }
,"71":{  "name": "台湾省","value":0 }
,"81":{ "name": "香港特别行政区","value":0 }
,"82":{ "name": "澳门特别行政区","value":0 }}

以定义的数据的key值去过滤后端数据

  //地图数据处理setmapdata(item){
//qymap最后结果数据  this.mapdata是自定义的地图数据
//Object.keys()方法遍历key值this.qymap =  Object.keys(this.mapdata[0]).map(v =>{item.map(a =>{if(a.code){
//截取后端数据前2位进行比较if(a.code.substring(0,2) == v){
//相同则相加对应的key值对象this.mapdata[0][v].value += a.count}}})return{name: this.mapdata[0][v].name,value:this.mapdata[0][v].value}})},

最后输出结果：

echart 地图数据封装相关推荐

echart地图知识点
echart地图城市经纬度使用geo时,导入china.js,填数剧时,前两列映射到经纬度,第三列映射到值,嵌套数组 //转换数据示例 //取地图映射数据function convertData(d ...
echart地图双击放大
注:echart地图需要引用第三方插件注2:echart地图虽然实现了双击放大但是还未实现以点击处为中心点实现放大效果提示:主要需要计算经纬度暂时还不知道怎么获取点击点的经纬度 &l ...
echart地图合并，并取消边框
原文地址:https://blog.csdn.net/qq_19816325/article/details/108520451 问题 echart地图区域合并,并不出现边框按照之前的经验,每个区域 ...
解决echart地图在平移和缩放后，重新生成地图，这时生成的地图不在容器中间，会跑到容器外面去。
解决echart地图在平移和缩放后跑到容器外面去写在前面解决办法实现效果图外卖红包优惠券在哪里领,那些天天都可以领外卖优惠券的公众号是真的吗? 写在前面用echart做一个中国地图(可缩放和 ...
echart地图+散点图表，点击散点触发BootstrapDialog弹框
echart地图和散点图结合,点击散点触发BootstrapDialog弹框. 需要引入文件jquery.bootstrap.bootstrap-dialog.min.js.echarts.min.j ...
vue中使用echart地图
vue中使用echart地图获取湖南的地图数据实现的效果步骤一些方法地图options 总结获取湖南的地图数据 https://gallery.echartsjs.com/editor.h ...
echart地图以及地图链路样式
echart地图以及地图链路样式 html js引入的先后顺序很重要 <!DOCTYPE html> <html lang="en"> <head&g ...
echart 地图添加了滚轮放大缩小导致二级地图无法居中问题
echart 地图添加了滚轮放大缩小导致二级地图无法居中问题由于地图有鼠标拖动移动,滚轮放大缩小的需求.添加了以下代码 geo: {map: 'china',type: "map" ...
关于如何自定义echart地图
关于如何自定义echart地图开门见山的说自定义显示echart地图最重要的就是这个引入的文件文件里面大概是这样的最主要是这个registerMap(mapName,geoJson,spe ...

echart 地图数据封装

echart 地图数据封装相关推荐

最新文章

热门文章