苍穹外卖day11 Apache ECharts 数据统计-图形报表

文章目录

前言
[一、Apache ECharts](#一、Apache ECharts)
二、营业额统计
- [1. 业务规则](#1. 业务规则)
- [2. 接口设计](#2. 接口设计)
- [3. 代码实现](#3. 代码实现)
三、用户统计
- [1. 业务规则](#1. 业务规则)
- [2. 接口设计](#2. 接口设计)
- [3. 代码实现](#3. 代码实现)
四、订单统计
- [1. 业务规则](#1. 业务规则)
- [2. 接口设计](#2. 接口设计)
- [3. 代码实现](#3. 代码实现)
五、销量排名Top10
- [1. 业务规则](#1. 业务规则)
- [2. 接口设计](#2. 接口设计)
- [3. 代码实现](#3. 代码实现)

前言

作为后端开发人员使用Echarts，重点在于研究当前图表所需的数据格式，响应给前端来展示图表。

本项目用于图形报表主要包括营业额、用户、订单、销量排名Top10统计，业务逻辑都差不多,请求参数都为开始时间和结束时间。
营业额统计

1、构建一个集合用于存储指定时间范围内每天的日期，一个集合用于存放每天营业额

2、遍历日期集合，并定义一个map用于存放当天开始时间、结束时间以及订单为已完成状态作为条件查询满足要求的订单并计算营业额，将当天的营业额添加到集合中

3、最后将集合中的数据拼成字符串放到TurnoverReportVO中返回
用户统计

1、构建一个集合用于存储指定时间范围内每天的日期，一个集合用于存放存放每天的新增用户数量，一个集合用于存放存放每天的总用户数量

2、遍历日期集合，并定义一个map用于存放当天开始时间、结束时间，然后作为条件查询满足要求的总用户和新增用户，将当天的总用户数和新增用户数添加到集合中

3、最后将集合中的数据拼成字符串放到UserReportVO中返回

...

一、Apache ECharts

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

官网地址：https://echarts.apache.org/zh/index.html

快速入门：https://echarts.apache.org/handbook/zh/get-started/

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

二、营业额统计

1. 业务规则

营业额指订单状态为已完成的订单金额合计

基于可视化报表的折线图展示营业额数据，X轴为日期，Y轴为营业额

根据时间选择区间，展示每天的营业额数据

2. 接口设计

3. 代码实现

1、在ReportController中定义turnoverStatistics方法统计营业额数据

java 复制代码

@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));
}

2、在ReportService接口声明getTurnover方法统计指定时间区间内的营业额数据，在ReportServiceImpl实现getTurnover方法

一个集合用于存储指定时间范围内每天的日期，一个集合用于存放每天营业额

定义一个map用于存放当天开始时间、结束时间以及订单为已完成状态作为条件查询满足要求的订单并计算营业额

最后将数据放到TurnoverReportVO中返回

java 复制代码

public TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end) {
    //当前集合用于存放begin到end范围内的每天的日期
    List<LocalDate> dateList = new ArrayList<>();
    dateList.add(begin);
    while (!begin.equals(end)){
        //日期计算，计算指定日期的后一天对应的日期
        begin = begin.plusDays(1);
        dateList.add(begin);
    }
    //存放每天的营业额
    List<Double> turnoverList = new ArrayList<>();
    for (LocalDate date : dateList) {
        //查询date日期对应的营业额数据，营业额是指：状态为已完成的订单金额合并
        //当天开始时间和结束时间
        LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);
        LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);
        //select sum(amount) from orders where order_time > ? and order_time < ? and status = 5
        Map map = new HashMap();
        map.put("begin",beginTime);
        map.put("end",endTime);
        map.put("status", Orders.COMPLETED);
        Double 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();
}

3、在OrderMapper接口声明sumByMap方法，在OrderMapper.xml文件中编写动态SQL

xml 复制代码

<select id="sumByMap" resultType="java.lang.Double">
   select sum(amount) from sky_take_out.orders
    <where>
        <if test="begin != null">and order_Time &gt; #{begin}</if>
        <if test="end != null">and order_Time &lt; #{end}</if>
        <if test="status != null">and status = #{status}</if>
    </where>
</select>

三、用户统计

1. 业务规则

基于可视化报表的折线图展示用户数据，X轴为日期，Y轴为用户数

根据时间选择区间，展示每天的用户总量和新增用户量数据

2. 接口设计

3. 代码实现

1、在ReportController中创建userStatistics方法

java 复制代码

@GetMapping("/userStatistics")
@ApiOperation("用户统计")
 public Result<UserReportVO> userStatistics(
         @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,
         @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){
     log.info("用户数据统计：{}，{}",begin,end);
     return Result.success(reportService.getUserStatistics(begin,end));
 }

2、在ReportService接口中声明getUserStatistics方法，在ReportServiceImpl实现类中实现

java 复制代码

public UserReportVO getUserStatistics(LocalDate begin, LocalDate end) {
        //存放从begin到end之间的每天对应的日期
        List<LocalDate> dateList = new ArrayList<>();
        dateList.add(begin);
        while (!begin.equals(end)){
            begin = begin.plusDays(1);
            dateList.add(begin);
        }
        //存放每天的新增用户数量
        // select count(id) from user where create_time<? and create_time>?
        List<Integer> newUserList = new ArrayList<>();
        //存放每天的总用户数量
        //select count(id) form user where create_time<?
        List<Integer> totalUserList = new ArrayList<>();
        for (LocalDate date : dateList) {
            LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);
            LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);
            Map map = new HashMap();
            map.put("end",endTime);
            //总用户数量
            Integer totalUser = userMapper.countByMap(map);
            map.put("begin",beginTime);
            //新增用户数量
            Integer newUser = userMapper.countByMap(map);

            totalUserList.add(totalUser);
            newUserList.add(newUser);
        }
        //封装结果数据
        return UserReportVO
                .builder()
                .dateList(StringUtils.join(dateList,","))
                .totalUserList(StringUtils.join(totalUserList,","))
                .newUserList(StringUtils.join(newUserList,","))
                .build();
    }

3、在UserMapper接口中声明countByMap方法,在UserMapper.xml文件中编写动态SQL

java 复制代码

<select id="countByMap" resultType="java.lang.Integer">
    select count(id) from sky_take_out.user
    <where>
        <if test="begin!=null">and create_time &gt; #{begin}</if>
        <if test="end!=null">and create_time &lt; #{end}</if>
    </where>
</select>

四、订单统计

1. 业务规则

有效订单指状态为 "已完成" 的订单

基于可视化报表的折线图展示订单数据，X轴为日期，Y轴为订单数量

根据时间选择区间，展示每天的订单总数和有效订单数

展示所选时间区间内的有效订单数、总订单数、订单完成率，订单完成率 = 有效订单数 / 总订单数 * 100%

2. 接口设计

3. 代码实现

1、在ReportController中创建orderStatistics方法

java 复制代码

@GetMapping("/ordersStatistics")
@ApiOperation("订单数据统计")
 public Result<UserReportVO> userStatistics(
         @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,
         @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){
     return Result.success(reportService.getOrderStatistics(begin,end));
 }

2、在ReportService接口中声明getOrderStatistics方法，在ReportServiceImpl实现类中实现

java 复制代码

public OrderReportVO getOrderStatistics(LocalDate begin, LocalDate end) {
        //存放从begin到end之间的每天对应的日期
        List<LocalDate> dateList = new ArrayList<>();
        dateList.add(begin);
        while (!begin.equals(end)){
            begin = begin.plusDays(1);
            dateList.add(begin);
        }
        //每天订单总数集合
        ArrayList<Integer> orderCountList = new ArrayList<>();
        //每天有效订单数集合
        ArrayList<Integer> validOrderCountList = new ArrayList<>();
        //遍历dateList集合，查询每天的有效订单数和订单总数
        for (LocalDate date : dateList) {
            //查询每天订单总数
            //select count(id) from orders where order_time>? and order_time <?
            LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);
            LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);
            Integer orderCount = getOrderCount(beginTime, endTime, null);
            //查询每天的有效订单数
            //select count(id) from orders where order_time>? and order_time <? and status = 5
            Integer validOrderCount = getOrderCount(beginTime, endTime, Orders.COMPLETED);
            orderCountList.add(orderCount);
            validOrderCountList.add(validOrderCount);
        }
        //计算时间区间内的订单总数量
        Integer totalOrderCount = orderCountList.stream().reduce(Integer::sum).get();
        //计算时间区间内的有效订单数量
        Integer totalValidOrderCount = validOrderCountList.stream().reduce(Integer::sum).get();
        //计算订单完成率
        Double orderCompletionRate = 0.0;
        if(totalOrderCount != 0){
            orderCompletionRate = totalValidOrderCount.doubleValue()/totalOrderCount;
        }
        return OrderReportVO.builder()
                .dateList(StringUtils.join(dateList,","))
                .orderCountList(StringUtils.join(orderCountList,","))
                .validOrderCountList(StringUtils.join(validOrderCountList,","))
                .totalOrderCount(totalOrderCount)
                .validOrderCount(totalValidOrderCount)
                .orderCompletionRate(orderCompletionRate)
                .build();
    }
private Integer getOrderCount(LocalDateTime begin,LocalDateTime end,Integer status){
    Map map = new HashMap();
    map.put("begin",begin);
    map.put("end",end);
    map.put("status",status);
    return orderMapper.countByMap(map);
}

3、在OrderMapper接口中声明countByMap方法,在OrderMapper.xml文件中编写动态SQL

java 复制代码

<select id="countByMap" resultType="java.lang.Integer">
    select count(id) from sky_take_out.orders
    <where>
        <if test="begin != null">and order_Time &gt; #{begin}</if>
        <if test="end != null">and order_Time &lt; #{end}</if>
        <if test="status != null">and status = #{status}</if>
    </where>
</select>

五、销量排名Top10

1. 业务规则

根据时间选择区间，展示销量前10的商品（包括菜品和套餐）

基于可视化报表的柱状图降序展示商品销量

此处的销量为商品销售的份数

2. 接口设计

3. 代码实现

1、在ReportController中创建getSalesTop1方法

java 复制代码

@GetMapping("/top10")
@ApiOperation("销量排名统计")
 public Result<UserReportVO> userStatistics(
         @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,
         @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){
     return Result.success(reportService.getSalesTop1(begin,end));
 }

2、在ReportService接口中声明getSalesTop1方法，在ReportServiceImpl实现类中实现

java 复制代码

public SalesTop10ReportVO getSalesTop10(LocalDate begin, LocalDate end) {
    /*
    select od.name,sum(od.number) number from order_detail od,orders o
    where od.order_id = o.id and o.status = 5 and o.order_time<? and o.order_time>?
    group by od.name
    order by number desc
    limit 0,10
    */
    LocalDateTime beginTime = LocalDateTime.of(begin, LocalTime.MIN);
    LocalDateTime endTime = LocalDateTime.of(end, LocalTime.MAX);
    List<GoodsSalesDTO> salesTop10 = orderMapper.getSalesTop10(beginTime, endTime);
    List<String> names = salesTop10.stream().map(GoodsSalesDTO::getName).collect(Collectors.toList());
    String nameList = StringUtils.join(names, ",");
    List<Integer> numbers =    salesTop10.stream().map(GoodsSalesDTO::getNumber).collect(Collectors.toList());
    String numberList = StringUtils.join(numbers, ",");
    return SalesTop10ReportVO.builder()
            .nameList(nameList)
            .numberList(numberList)
            .build();
}

3、在OrderMapper接口中声明getSalesTop10方法,在OrderMapper.xml文件中编写动态SQL

java 复制代码

<select id="getSalesTop10" resultType="com.sky.dto.GoodsSalesDTO">
    select od.name,sum(od.number) number from sky_take_out.order_detail od,sky_take_out.orders o
    where od.order_id = o.id and o.status = 5
      <if test="begin!=null">and o.order_time &gt; #{begin}</if>
      <if test="end!=null">and o.order_time &lt;  #{end}</if>
    group by od.name
    order by number desc
    limit 0,10
</select>