河南天元建设公司网站,行业网站特点,东莞东城租房,网站改版上线目录
一.什么是ECharts?
二.如何使用Springboot来从后端给Echarts返回响应的数据#xff1f;
eg:折线图#xff1a;
①Controller层#xff1a;
②service层#xff1a; 一.什么是ECharts?
ECharts是一款基于JavaScript的数据可视化图标库#xff0c;提供直观
eg:折线图
①Controller层
②service层 一.什么是ECharts?
ECharts是一款基于JavaScript的数据可视化图标库提供直观生动可交互可个性化定制的数据可视化如表。
下面是官网地址Examples - Apache ECharts
二.如何使用Springboot来从后端给Echarts返回响应的数据
下面图片是Echarts的前端展示。 因为我们如何渲染的代码是前端写的而我们后端就需要给前端返回对应的数据就可以了。
在我们解释前先介绍些Java的知识点 ①DateTimeFormat(pattern yyyy-MM-dd) 用来描述日期格式以便于正确封装进入我们的LocalDate。 ②类名.builder().属性(属性值).builder 在pojo类上加上builder注解我们就可以使用这样的方式来构造类。 ③StringUtils.join(List,,) 通过使用StringUtils内的join方法就可以将数据最后将集合元素以字符串的形式并以 , 分隔来拼接。 下面两个方法来精确时间的间隔以便于我们精确每一种通过时间分隔数据的情况 ④LocalDateTime.of(date, LocalTime.MIN) 通过这个方法可以返回 date 的零点零分零秒。 ⑤LocalDateTime.of(date,LocalTime.MAX) 通过这个方法可以返回 date的23:59:59.999999999999。 ⑥begin begin.plusDays(1) 用来将begin时间的天数1并返回同理内部还有plusMonths()等方法来控制时间方法内实参传的是整数就加负数就减。 ⑦ListString ___ ___List.stream().map(类::属性).collect(Collectors.toList()); 我们在List集合每个元素封装的是一个类假如我们想把类内属性拆分成同一属性封装到一个集合内我们就可以使用上面的方法。 ⑧List.stream().reduce(Integer::sum).get() 计算集合内的数值和并返回 我们在写该代码的时候只需记住
①明确后端需要返回哪些数据给前端并定义一个pojo来封装返回结果
②使用前端拿到的数据来在service层设计内部逻辑
eg:折线图
折线图需要我们从后端返回两个数据横坐标集合 与 纵坐标集合
我们以黑马苍穹外卖为例我们想要展示横坐标的时间集合以及纵坐标根据时间对应的营业额统计而我们前端返回的数据就是时间段也就是开始时间begin以及结束时间end。
①Controller层
RestController
RequestMapping(/admin/report)
Api(tags 数据统计相关接口)
Slf4j
public class ReportController {Autowiredprivate ReportService reportService;GetMapping(/turnoverStatistics)ApiOperation(营业额统计)public ResultTurnoverReportVO turnoverStatistics(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end){log.info(营业额数据统计{},{},begin,end);return Result.success(reportService.getTurnoverStatistics(begin,end));}
}
②service层
先将时间段封装到dateList集合中然后使用增强for遍历dateList集合用map集合封装筛选条件在使用mapper获取营业额统计最后使用builder封装返回。
Service
Slf4j
public class ReportServiceImpl implements ReportService {Autowiredprivate OrderMapper orderMapper;Autowiredprivate UserMapper userMapper;Autowiredprivate OrderDetailMapper orderDetailMapper;Overridepublic TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end) {ListLocalDate dateList new ArrayList();dateList.add(begin);while(!begin.equals(end)){begin begin.plusDays(1);dateList.add(begin);}//存放每天的营业额ListDouble turnoverList new ArrayList();for (LocalDate date : dateList) {//查询当前日期对应的营业额营业额状态为“已完成”的订单金额合计LocalDateTime beginTime LocalDateTime.of(date, LocalTime.MIN);//某年某月某日的零点零分零秒LocalDateTime endTime LocalDateTime.of(date,LocalTime.MAX);//某年某月某日的23:59:59.999999999999//select sum(amount) from orders where order_time beginTime and order_time endTime and status 5Map map new HashMap();map.put(begin,beginTime);map.put(end,endTime);map.put(status, Orders.COMPLETED);//5Double turnover orderMapper.sumByMap(map);turnover turnover null ? 0.0 : turnover;//判空turnoverList.add(turnover);}//封装返回结果return TurnoverReportVO.builder().dateList(StringUtils.join(dateList,,))//集合元素 以字符串的形式 并 以,分隔 来拼接.turnoverList(StringUtils.join(turnoverList,,)).build();}
} 好了今天的内容就到这里内容要是对你有帮助记得三连感谢收看
