echart 地图数据封装

最新推荐文章于 2024-09-07 17:06:52 发布

哎呦看看

最新推荐文章于 2024-09-07 17:06:52 发布

阅读量725

点赞数

文章标签：前端经验分享 vue.js echarts

本文链接：https://blog.csdn.net/weixin_45468589/article/details/127864088

版权

根据需求前端要实现一个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
      }
    })
  },

最后输出结果：