说明:
前端使用:vue3.0 ECharts可视化库
前后端对接数据格式:无非就是前端把后端返回的数据处理为自己想要的格式,或者,后端给前端处理好想要的格式;
针对前后端的柱状图,趋势图等数据对接,前端一般需要数组格式;
我们之前返回的数据格式是LIst Map
举例:动态数据统计思路案例(动态,排序,containsKey)五(117)
如图所示;
而我们需要数组格式:
后端代码处理:
@Override
public 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 LinkedHashMap<>();
// Map存储:(region,统计次数),统计次数为相同region的次数;
Map<String,Object> countMap = new LinkedHashMap<>();
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> regionList2 = new ArrayList<String>(); // 地域2
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 key = entry.getKey();
String value = String.valueOf(entry.getValue());
regionList2.add(key);
countList.add(value);
}
// 计算平均值:封装集合avgList
if(regionList.size() == numberList.size() && regionList2.size() == countList.size() && regionList.size() == regionList2.size()) {
for (int i = 0; i < regionList.size(); i++) {
String reg1 = regionList.get(i);
double fenzi = Double.parseDouble(numberList.get(i));
for (int j = 0; j < regionList2.size(); j++) {
String reg2 = regionList2.get(j);
if(reg1.equals(reg2)) {
int fenmu = Integer.valueOf(countList.get(j));
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中添加排序字段:sortValue
String[] 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中添加排序字段:sortValue
String[] 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测试:
这样前端就可以直接获取使用了,返回的数组里面也是经过排序处理的;