場景

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数据,构造对象数组数据格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。