【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…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
FastAPI 教程:从入门到实践
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,支持 Python 3.6。它基于标准 Python 类型提示,易于学习且功能强大。以下是一个完整的 FastAPI 入门教程,涵盖从环境搭建到创建并运行一个简单的…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
