场景

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数据,构造对象数组数据格式相关推荐

Vue 中 props 传值，父组件向子组件传递对象/数组可以直接修改的问题
vue 中父子组件通信最常用的方式是 props 和 $emit,所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这 ...
vue使用js遍历数组和对象
前言在vue中,遍历数组和对象的方式略有不同,不能完全以数组或对象的遍历方式给对方使用并获取数据.为了记录以及以后方便查看,现在对其进行整理. 数组遍历以数组 array = [1,2,3,4,5 ...
vue中js文件里获取this（vue实例）
vue中js文件里获取this(vue实例) 1,在main.js中抛出vue实例,在需要用到的地方引入即可 main.js里let vueThis= new Vue({el: '#app',rout ...
Android使用webview控件加载本地html，通过Js与后台Java实现数据的传递
1.在布局文件中加WebView控件,在java中获取WebView对象. 2.加载本地html文件. webView.loadUrl("file:///android_asset/andr ...
el转义html标签,vue 中el-table转义后台字符
一.现实的问题: 1.vue前端需要把后台拼接的String中的指定html标签进行转义.(思考:存在这种需求情况->el-table中需要显示用户第一编辑的原原本本的格式,包括换行,字体大小之 ...
vue中的data用return返回
为什么在大型项目中data需要使用return返回数据呢? 答:不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件. ...
JS前端取得并解析后台服务器返回的JSON数据的方法
摘要:主要介绍:使用eval函数解析JSON数据:$.getJSON()方法获得服务器返回的JSON数据 JavaScript eval() 函数 eval(string) 函数可计算某个字符串,并执 ...
中序遍历二叉树-Java实现
/*** 假定二叉树节点的结构如下:* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode(int ...
js 如何将java list集合转换成var类型数组_零基础参加郑州Java培训一定要注意Arrays.asList的用法...
作为编程界的老大哥,Java一直是想要加入互联网行业的人的首选.为了能够更快更好地入行,很多零基础学员选择参加郑州Java培训班,跟着老师的脚步由浅入深的学习专业技术.今天千锋郑州小编就给大家分享使用 ...

Vue中JS遍历后台JAVA返回的Map数据,构造对象数组数据格式

场景

实现

Vue中JS遍历后台JAVA返回的Map数据,构造对象数组数据格式相关推荐

最新文章

热门文章