【Java 动态数据统计图】前后端对接数据格式(Map返回数组格式数据)六(120)
说明:
前端使用:vue3.0
前后端对接数据格式:无非就是前端把后端返回的数据处理为自己想要的格式,或者,后端给前端处理好想要的格式;
针对前后端的柱状图,趋势图等数据对接,前端一般需要数组格式;
我们之前返回的数据格式是LIst Map
举例:动态数据统计思路案例(动态,排序,containsKey)五(117)
如图所示;

而我们需要数组格式:
后端代码处理:
@Overridepublic Map<String,Object> getTimeData(HttpServletRequest request, Map<String, Object> paramMap) {List<Map<String,Object>> list = getCountData(request,paramMap);list = list.stream().filter(e -> (e.get("status").equals("关闭"))).collect(Collectors.toList());// Map存储:(region,num),num为相同region的加和;Map<String,Object> regionMap = new HashMap<>();// Map存储:(region,统计次数),统计次数为相同region的次数;Map<String,Object> countMap = new HashMap<>();for (int i = 0; i < list.size(); i++) {String region = String.valueOf(list.get(i).get("region"));String num = String.valueOf(list.get(i).get("processTime"));// regionMap包含region:将region当作key;if(regionMap.containsKey(region)) {String key = region;String value = String.valueOf(regionMap.get(key)); // 从regionMap获取value值;即地域对应的num值;regionMap.put(region, Double.parseDouble(value) + Double.parseDouble(num));}else { // 不包含,直接存进去regionMap.put(region, num);}// countMap包含region:将region当作key;if(countMap.containsKey(region)) {String key2 = region;String value2 = String.valueOf(countMap.get(key2)); // 从countMap获取value值;即地域对应的统计次数值;countMap.put(region, Integer.valueOf(value2) + 1);}else { // 不包含,直接存进去countMap.put(region, 1);}}List<String> regionList = new LinkedList<String>(); // 地域List<String> numberList = new LinkedList<String>(); // 数值List<String> countList = new LinkedList<String>(); // 统计次数List<String> avgList = new LinkedList<String>(); // 平均值// 封装地域集合:(北京,数值和)Iterator<Map.Entry<String, Object>> it = regionMap.entrySet().iterator();while(it.hasNext()){Map.Entry<String, Object> entry = it.next();String key = entry.getKey();String value = String.valueOf(entry.getValue());regionList.add(key);numberList.add(value);}// 封装统计次数集合:(北京,统计次数)Iterator<Map.Entry<String, Object>> it2 = countMap.entrySet().iterator();while(it2.hasNext()){Map.Entry<String, Object> entry = it2.next();String value = String.valueOf(entry.getValue());countList.add(value);}// 计算平均值:封装集合avgListif(numberList.size() == countList.size()) {for (int i = 0; i < numberList.size(); i++) {double fenzi = Double.parseDouble(numberList.get(i));int fenmu = Integer.valueOf(countList.get(i));if(fenmu > 0) {Double x = fenzi/fenmu;// double类型的数据当分母的数值趋近0的时候,返回来的数值就是一个NAN:if(Double.isNaN(x)){x = 0.0;}avgList.add(String.valueOf(x));}}}// 最终输出集合:List<Map<String,Object>> resultList = new ArrayList<>();// 根据地域集合与平均值集合封装新集合resultList:if(regionList.size() == avgList.size()) {for (int i = 0; i < regionList.size(); i++) {Map<String,Object> map = new HashMap<>();map.put("title",regionList.get(i));map.put("value",avgList.get(i).substring(0,avgList.get(i).indexOf(".")+2));resultList.add(map);}}//排序:value值大的Map往前排,斌且插入新字段:sortValue,代表序列;Double[] valueSort = new Double[resultList.size()];String[] titleSort = new String[resultList.size()];// 排序后最终输出集合:List<Map<String,Object>> listFinal= new ArrayList<>();// 获取排序的数组:for (int i = 0; i < resultList.size(); i++) {valueSort[i] = Double.parseDouble(String.valueOf(resultList.get(i).get("value")));titleSort[i] = String.valueOf(resultList.get(i).get("title"));}// 数组排序:BubblSortUtils.bubbleSortDescMultipleDouble(valueSort,titleSort);// 数组封装listFinal:for (int i = 0; i < valueSort.length; i++) {String ch = String.valueOf(titleSort[i]);for (int j = 0; j < resultList.size(); j++) {String value = String.valueOf(resultList.get(j).get("title"));if(ch.equals(value)){listFinal.add(resultList.get(j));}}}// listFinal中添加排序字段:sortValueString[] A = new String[listFinal.size()];String[] B = new String[listFinal.size()];for (int i = 0; i < listFinal.size(); i++) {listFinal.get(i).put("sortValue",listFinal.size()-i);A[i] = String.valueOf(listFinal.get(i).get("title"));B[i] = String.valueOf(listFinal.get(i).get("value"));}Map<String,Object> restMap = new HashMap<>();restMap.put("title",A);restMap.put("value",B);return restMap;}
备注:以上代码可简化处理,写这么多是为了明确每个过程,提供数据处理的拓展思路;
代码修改位置:
1.最终返回值由List Map改为数组返回:
2.修改接口返回值类型:由List Map修改为Map
最后返回值修改如下:
// listFinal中添加排序字段:sortValueString[] A = new String[listFinal.size()];String[] B = new String[listFinal.size()];for (int i = 0; i < listFinal.size(); i++) {listFinal.get(i).put("sortValue",listFinal.size()-i);A[i] = String.valueOf(listFinal.get(i).get("title"));B[i] = String.valueOf(listFinal.get(i).get("value"));}Map<String,Object> restMap = new HashMap<>();restMap.put("title",A);restMap.put("value",B);return restMap;
Postman测试:

这样前端就可以直接获取使用了,返回的数组里面也是经过排序处理的;
相关文章:
【Java 动态数据统计图】前后端对接数据格式(Map返回数组格式数据)六(120)
说明: 前端使用:vue3.0 前后端对接数据格式:无非就是前端把后端返回的数据处理为自己想要的格式,或者,后端给前端处理好想要的格式; 针对前后端的柱状图,趋势图等数据对接,前端一般需…...
❤ 给自己的mac系统上安装java环境
❤ 给自己的mac系统上安装java环境 🍓 作为前端工程师如何给自己的mac系统上安装java环境 🍎 最近因为自己的一些项目需求,mac电脑上需要安装一些后台的java环境,用来跑后台的java程序,于是从一个前端工程师的角度安…...
Java-匿名类
介绍 匿名类是指没有名字的类,它对一个给定的类进行拓展,或者实现一个给定的接口。使用匿名类可以使得代码更加简洁、紧凑、模块程度更高。 实现方式及语法 匿名类有两种实现方式 继承一个类,重写其方法实现一个接口(可以是多…...
Maven的超级POM
对于我们创建的一个maven工程,即便我们自己的pom.xm文件中没有明确指定一个父工程(父POM),其实也默认继承了超级POM,就好比JAVA类继承Object类一样。 maven官网关于超级POM的介绍: https://maven.apache.o…...
软考高级系统架构设计师系列论文九十二:论新技术的引进
软考高级系统架构设计师系列论文九十二:论新技术的引进 一、摘要二、正文三、总结一、摘要 根据国家税务总局对税务系统内所有系统进行集成与整合的需求,我所在的开发单位组织了全国金税工程防伪税控系统网络版的升级开发工作。该项目工程浩大,要求在具有严格的安全、可靠性…...
vue使用Bootstrap的详细方法
要在Vue中使用Bootstrap,您可以按照以下步骤进行操作: 安装Bootstrap:首先,您需要安装Bootstrap。您可以使用npm或者yarn来安装Bootstrap。打开终端,并在项目的根目录中运行以下命令: npm install bootst…...
leetcode做题笔记103. 二叉树的锯齿形层序遍历
给你二叉树的根节点 root ,返回其节点值的 锯齿形层序遍历 。(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行)。 思路一:BFS #define N 2000int** zigzagLevelOrder(st…...
如果将PC电脑变成web服务器:利用Nignx反向代理绕过运营商对80端口封锁
如果将PC电脑变成web服务器:利用Nignx反向代理绕过运营商对80端口封锁 在上一篇文章中,我们已经实现了内网主机的多次端口映射,将内网主机的端口映射到了公网,可以通过公网访问该主机了。 因为电信的家庭宽带,默认是…...
Eureka:服务注册-信息配置-自我保护机制
首先在提供者服务下,添加一个依赖 <!-- Eureka --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-eureka</artifactId><version>1.4.6.RELEASE</version><…...
C++二叉树进阶
本期内容我们讲解二叉树的进阶知识,没有看过之前内容的小伙伴建议先看往期内容 二叉树-----补充_KLZUQ的博客-CSDN博客 目录 二叉搜索树 代码实现 基础框架 Insert Find Erase 析构函数 拷贝构造 赋值 二叉搜索树的应用 全部代码 二叉搜索树 二叉搜索树…...
layui tree组件取消勾选
layui(2.8.15) tree的api中,只有 tree.setChecked(id, idArr) 方法,没有取消勾选的方法。 我的需求是:勾选后做判断,如果不符合条件则取消勾选。 实现方法: 使用 tree的oncheck事件,在回调函数中做判断&…...
【Android基础面试题】ViewPager与ViewPager2的区别
ViewPager和ViewPager2是Android中用于实现滑动页面切换的控件。它们的主要区别如下: 实现方式 ViewPager2的内部实现是RecyclerView,而ViewPager是通过继承自ViewGroup实现的。因此,ViewPager2的性能更高。 滑动方向 ViewPager2可以实现横向…...
springCloudGateway网关配置
1.配置跨域支持 /*** 跨域支持*/ Configuration public class CorsConfig {Beanpublic CorsWebFilter corsFilter() {CorsConfiguration config new CorsConfiguration();config.addAllowedMethod("*");config.addAllowedOrigin("*");config.addAllowedH…...
kali 2023.3新增工具
在终端模拟器中运行 sudo apt update && sudo apt full-upgrade 命令来更新其安装 Kali Linux 2023.3 发布中包含了九个新工具,分别是: Calico:云原生网络和网络安全。 cri-tools:用于Kubelet容器运行时接口的命令行界面…...
W25Q64 驱动--基于SPI2接口
前言 (1)本系列是基于STM32的项目笔记,内容涵盖了STM32各种外设的使用,由浅入深。 (2)小编使用的单片机是STM32F105RCT6,项目笔记基于小编的实际项目,但是博客中的内容适用于各种单片…...
禁用无线键盘指定按键
文章目录 前言主体 前言 睡一觉把键盘压坏了一个按键,一开机键盘就自动打出这个字母,我在想用其他按键平替这个字母即可,使用软件修改内部的映射,那么使用autoHotkey软件是十分容易做到的 主体 letter_replace.ahk 创建一个如此命名的文件,然后输入命令即可 a::b 代表平替 a…...
分数规划(二分)
链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 题目描述 小咪是一个土豪手办狂魔,这次他去了一家店,发现了好多好多(n个)手办,但他是一个很怪的人,每次只想买k个手办&a…...
Vue2向Vue3过度Vue3状态管理工具Pinia
目录 1. 什么是Pinia2. 手动添加Pinia到Vue项目3. Pinia基础使用4. getters实现5. action异步实现6. storeToRefs工具函数7. Pinia的调试8. Pinia持久化插件 1. 什么是Pinia Pinia 是 Vue 的专属的最新状态管理库 ,是 Vuex 状态管理工具的替代品 2. 手动添加Pinia到…...
STM32--SPI通信与W25Q64(1)
文章目录 前言SPI通信硬件电路移位过程 SPI时序起始与终止条件交换一个字节 W25Q64硬件电路框图 FLASH操作注意事项软件SPI读写W25Q64 前言 USART串口链接入口 I2C通信链接入口 SPI通信 SPI(Serial Peripheral Interface)是一种高速的、全双工、同步的串…...
版本控制工具Git常见用法
Git 是一个非常强大和灵活的版本控制工具,提供了许多命令和功能来管理代码的版本、分支、合并等。以下是一些 Git 的详细用法: 配置相关命令: 设置用户名和邮箱: git config --global user.name "Your Name" git conf…...
保姆级教程:手把手教你用MuJoCo和Spinning Up让UR5机械臂学会‘指哪打哪’
从零实现UR5机械臂强化学习控制:MuJoCo与Spinning Up实战指南 看着实验室里崭新的UR5机械臂,你是否想过让它像人类手臂一样灵活地指向任意位置?传统控制方法需要复杂的运动学计算,而强化学习能让机械臂通过"试错"自主掌…...
长期使用Taotoken Token Plan套餐在项目开发中的成本控制体会
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 长期使用Taotoken Token Plan套餐在项目开发中的成本控制体会 在中长期AI项目的开发实践中,成本的可预测性与可控性是团…...
FPGA实战:基于Verilog的正交调制解调系统设计与仿真验证
1. 正交调制解调系统基础认知 第一次接触正交调制解调时,我也被那些数学公式绕得头晕。后来发现,用日常生活中的例子理解会简单很多——就像两个人同时往同一个方向扔球(I路和Q路信号),接收端需要准确接住这两个球并还…...
【仿真实战】AnyLogic地铁站客流仿真:从零搭建带安检与限流的多层车站模型
1. 从零开始搭建地铁站仿真模型 第一次接触AnyLogic做地铁站客流仿真时,我完全被各种模块和参数搞晕了。后来在几个实际项目中摸爬滚打,终于总结出一套小白也能快速上手的方法。这次我们就来搭建一个包含安检区和限流措施的多层地铁站模型,整…...
芯片行业变革:开源硬件、可重构芯片与商业模式创新
1. 行业拐点:传统芯片商业模式为何难以为继?干了十几年芯片设计,从流片工程师到项目负责人,我亲眼见证了行业从“黄金时代”到如今“卷成本、卷工艺”的艰难转型。最近和几个老同事聊天,大家不约而同地提到一个词&…...
Firefly:一站式大模型训练工具,从零到一掌握LLM微调
1. 项目概述:一站式大模型训练工具Firefly 如果你正在寻找一个能够让你快速上手,从零开始训练或微调主流大语言模型(LLM)的开源项目,那么Firefly(流萤)绝对值得你花时间深入了解。作为一名在AI…...
如何快速将Figma设计文件转换为结构化JSON数据:完整指南
如何快速将Figma设计文件转换为结构化JSON数据:完整指南 【免费下载链接】figma-to-json 💾 Read/Write Figma Files as JSON 项目地址: https://gitcode.com/gh_mirrors/fi/figma-to-json 在当今的设计开发工作流中,Figma已成为UI/UX…...
服装吊牌变量条码打印机:优质供应商选择策略解析
“选对服装吊牌变量条码打印机供应商,比单纯比价更重要的是匹配柔性生产需求——这是超六成服装从业者反馈的采购核心准则。”中小商家面临小批量吊牌外发成本高、出货慢的困境,大企业则受限于多SKU适配难、数据不同步的痛点,如何找到能覆盖全…...
避坑指南:在Qt 6.5下编译QGC源码,UI启动报错的几个常见原因与修复
Qt 6.5下QGroundControl源码编译实战:UI启动报错深度排查手册 当你满怀期待地克隆了QGroundControl最新源码,按照官方文档配置好Qt 6.5环境,却在首次启动时遭遇UI加载失败的黑色窗口或崩溃提示——这种挫败感我深有体会。本文将带你系统排查Q…...
别再瞎调了!OpenCV手动曝光参数CAP_PROP_EXPOSURE与快门时间换算表(附Python/C++代码)
OpenCV曝光参数与快门时间实战指南:从原理到精准控制 在计算机视觉项目中,摄像头曝光控制往往是影响图像质量的关键因素之一。许多开发者在使用OpenCV的CAP_PROP_EXPOSURE参数时,都会遇到一个共同的困惑:为什么设置的值是-13而不…...
