苍穹外卖项目笔记（12）— 数据统计-图形报表

1 Apache ECharts

基于 Javascript 的数据可视化图标库，提供直观生动可交互可个性定制的数据可视化图表

• 柱形图
• 饼形图
• 折线图

【核心】通过直观的图表来展示数据。使用 Echarts ，重点在于研究当前图表所需的数据格式，通常是需要后端提供符合格式要求的动态数据，然后响应给前端来展示图表。

2 营业额统计

2.1 需求分析和设计

产品原型

接口设计

【注】这里的 data 数据格式需要适应前端 ，前端需要什么格式数据就返回什么格式数据

设计 VO 

2.2 代码开发

ReportController.java

@RestController
@RequestMapping("/admin/report")
@Api(tags = "数据统计相关接口")
@Slf4j
public class ReportController {
 
    @Autowired
    private ReportService reportService;
 
    /**
     * 营业额统计
     * @param begin
     * @param end
     * @return
     */
    @GetMapping("/turnoverStatistics")
    @ApiOperation("营业额统计")
    public Result<TurnoverReportVO> 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));
    }
}

ReportServiceImpl.java

@Service
@Slf4j
public class ReportServiceImpl implements ReportService {
    @Autowired
    private OrderMapper orderMapper;
 
    /**
     * 统计指定时间区间内的营业额数据
     * @param begin
     * @param end
     * @return
     */
    public TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end) {
 
        //1、计算日期，把开始日期到结束日期放到一个集合里面，再把这个集合的每个元素取出来中间添加“，”放入到 dataList 里面去
        List<LocalDate> dateList = new ArrayList<>();  // 用于存放begin-end范围内的每天的日期
 
        dateList.add(begin);
 
        while (!begin.equals(end)) {
            //日期计算，计算指定日期的后一天对应的日期
            begin = begin.plusDays(1);
            dateList.add(begin);
        }
 
        //2、查询 datalist 里面的每天的营业额数据，最后替换为字符串并加“，”
 
        List<Double> turnoverList = new ArrayList<>();
 
        for (LocalDate date : dateList) {
            //查询data 日期对应的营业额数据，营业额是指状态为“已完成”的订单金额合计（查询订单表，每个订单都含有金额字段）
            //date: LocalData ，只有年月日， order_time： LocalDataTime ，既有年月日又有时分秒
            //order_time 应该是大于当天的最小时间，小于当天的最大时间
            LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN); //LocalTime.MIN： '00:00' ，对应的就是零点零分
            LocalDat