【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测试：
在这里插入图片描述
这样前端就可以直接获取使用了，返回的数组里面也是经过排序处理的；