场景

SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图：

SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面需要后台返回Map类型的数据格式，key为时间，value为数量。

后台返回后js中怎样遍历Map数据。

注：

博客：

BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主

关注公众号

霸道的程序猿

获取编程相关电子书、教程推送与免费下载。

实现

1、后台返回数据代码

public AjaxResult list(BusBlog busBlog){BusBlog indexModel=new BusBlog();//构造返回数据，注意这里需要用LinkedHashMapMap<String,Integer> resultMap = new LinkedHashMap<String,Integer>();if(null!= busBlog.getBeginDate() && null!= busBlog.getEndDate()) {//获取请求参数，开始时间和结束时间indexModel.setBeginDate(busBlog.getBeginDate());indexModel.setEndDate(busBlog.getBeginDate());List<String> rangeData = new ArrayList<String>();//查询数据库获取指定时间内的数据rangeData = busBlogService.selectBlogCountByDate(busBlog);if (rangeData.size() >= 0) {// 日期格式化SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");try {// 起始日期Date d1 = sdf.parse(busBlog.getBeginDate());// 结束日期Date d2 = sdf.parse(busBlog.getEndDate());Date tmp = d1;Calendar dd = Calendar.getInstance();dd.setTime(d1);while (tmp.getTime() < d2.getTime()) {int dayCount = 0;tmp = dd.getTime();//获取查询的数据每天的档案数量for (String oneDay:rangeData) {Date oneDayDate = sdf.parse(oneDay);if(oneDayDate.toString().equals(tmp.toString())){dayCount++;}}resultMap.put(sdf.format(tmp),dayCount);// 天数加上1dd.add(Calendar.DAY_OF_MONTH, 1);}System.out.println(resultMap);} catch (ParseException e) {e.printStackTrace();}}}return AjaxResult.success(resultMap);}

返回数据格式

2、前端遍历返回数据

this.getList().then((response) => {var res = response.data;if (res) {//清空柱状图的数据源this.typeData = [];//遍历后台响应数据，构造柱状图数据源for (var key in res) {this.typeData.push({ product: key, 博客数: res[key] });}}this.initChart(this.typeData);});

如果觉得《Vue中JS遍历后台JAVA返回的Map数据 构造对象数组数据格式》对你有帮助，请点赞、收藏，并留下你的观点哦！