苍穹外卖项目实战（day11-1）-记录实战教程、问题的解决方法以及完整代码

十八旬2025-09-24 15:04

day11-图形统计

（1）Apache ECharts

1-1、简介

Apache 是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。通过直观的图表展示数据。

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

常见图表形式：

1-2、入门案例

Apache Echarts官方提供的快速入门： https://echarts.apache.org/handbook/zh/get-started/

1、echarts.js

echarts.js

2、echartsDemo.html

复制代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
 
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
 
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

（2）营业额统计

2-1、需求分析和设计

2-2、代码开发

1、admin包下创建ReportController

位置：sky-server/src/main/java/com/sky/controller/admin/ReportController.java

代码：

复制代码 
package com.sky.controller.admin;
 
import com.sky.result.Result;
import com.sky.service.ReportService;
import com.sky.vo.TurnoverReportVO;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.time.LocalDate;
 
/**
 * 数据统计相关接口
 */
@RestController
@RequestMapping("/admin/report")
@Api(tags = "数据统计相关接口")
@Slf4j
public class ReportController {
    @Autowired
    private ReportService reportService;
    @GetMapping("/turnoverStatistics")
    @ApiOperation(value = "营业额统计")
    public Result<TurnoverReportVO> TurnoverReport(
            @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,
            @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end) {
        log.info("获取{}到{}营业额统计数据:",begin, end);
        TurnoverReportVO turnoverStatistics = reportService.getTurnoverStatistics(begin, end);
        return Result.success(turnoverStatistics);
    }
}

示意图：

2、ReportService

位置：sky-server/src/main/java/com/sky/service/ReportService.java

代码：

复制代码 
package com.sky.service;
 
import com.sky.vo.TurnoverReportVO;
 
import java.time.LocalDate;
import java.util.List;
 
public interface ReportService {
    TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end);
}

示意图：

3、ReportServiceImpl

位置：sky-server/src/main/java/com/sky/service/impl/ReportServiceImpl.java

代码：

复制代码 
package com.sky.service.impl;
 
import com.sky.entity.Orders;
import com.sky.mapper.OrderMapper;
import com.sky.service.ReportService;
import com.sky.vo.TurnoverReportVO;
import lombok.extern.slf4j.Slf4j;
import org.apache.poi.util.StringUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
@Service
@Slf4j
public class ReportServiceImpl implements ReportService {
    @Autowired
    private OrderMapper orderMapper;
 
    /**
     * 获取指定时间段内的营业额统计数据
     * @param begin
     * @param end
     * @return
     */
    public TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate 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) {
            LocalDateTime startTime = LocalDateTime.of(date, LocalTime.MIN);// 开始时间, 00:00:00
            LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);// 结束时间, 23:59:59
            // 查询有效订单数量
            Map map = new HashMap();
            map.put("begin", startTime);
            map.put("end", endTime);
            map.put("status", Orders.COMPLETED);// 订单状态为已完成
 
            //select count(id) from orders where status = 5
            // and order_time >= #{startTime} and order_time <= #{endTime}
            Double turnover = orderMapper.sumBymap(map);
            //如果营业额为null,则置为0.0
            if(turnover == null){
                turnover = 0.0;
            }
            turnoverList.add(turnover);
        }
 
        //用StringUtil拼接日期列表和营业额列表
        String join = StringUtil.join(",", dateList);
        String join2 = StringUtil.join(",", turnoverList);
 
        //创建TurnoverReportVO对象
        TurnoverReportVO build =
                TurnoverReportVO.builder()
                        .dateList(join)//日期列表
                        .turnoverList(join2)//营业额列表
                        .build();
        return build;
    }
 
}

示意图：
2、OrderMapper

位置：sky-server/src/main/resources/mapper/OrderMapper.xml

代码：

复制代码 
<select id="sumBymap" resultType="Double">
select sum(amount) from 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>

示意图：

2-3、测试

（3）用户统计

3-1、需求分析和设计

3-2、代码开发

1、admin包的ReportController

位置：sky-server/src/main/java/com/sky/controller/admin/ReportController.java

代码：

复制代码 
/**
 * 获取指定时间段内的用户统计数据
 * @param begin
 * @param end
 * @return
 */
public UserReportVO getUserStatistics(LocalDate begin, LocalDate end) {
    List<LocalDate> dateList = new ArrayList();
    dateList.add(begin);
    // 循环获取日期列表
    while(!begin.equals(end)){
        begin = begin.plusDays(1);
        dateList.add(begin);
    }
 
    // 查询指定日期的用户数量
    // 总用户列表
    List<Integer> totalUserList = new ArrayList();
    // 新增用户列表
    List<Integer> newUserList = new ArrayList();
    for (LocalDate date : dateList) {
        //由于数据库的对应的字段名为create_time形式是年月日时分秒,所以需要将LocalDate转换为LocalDateTime
        LocalDateTime startTime = LocalDateTime.of(date, LocalTime.MIN);// 开始时间, 00:00:00
        LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);// 结束时间, 23:59:59
 
        // 查询新增用户数量
        //select count(distinct user_id) from orders
        // where order_time >= #{startTime} and order_time <= #{endTime}
        Map map = new HashMap();
        map.put("begin", startTime);
        map.put("end", endTime);
        Integer newUser = orderMapper.countDistinctUserId(map);
        // 如果新增用户数量为null,则置为0
        if(newUser == null){
            newUser = 0;
        }
        newUserList.add(newUser);
 
        // 查询总用户数量
        //select count(distinct user_id) from user
        // where create_time >= #{startTime} and create_time <= #{endTime}
        Integer totalUser = userMapper.countDistinctByCreateTime();
        // 如果总用户数量为null,则置为0
        if(totalUser == null){
            totalUser = 0;
        }
        totalUserList.add(totalUser);
    }
 
    //用StringUtil拼接日期列表和用户数量列表
    String join = StringUtil.join(",", dateList);
    String join2 = StringUtil.join(",", totalUserList);
    String join3 = StringUtil.join(",", newUserList);
 
    //创建UserReportVO对象
    UserReportVO build =
            UserReportVO.builder()
                    .dateList(join)//日期列表
                    .totalUserList(join2)//总用户列表
                    .newUserList(join3)//新增用户列表
                    .build();
    return build;
}

示意图：

2、ReportService

位置：sky-server/src/main/java/com/sky/service/ReportService.java

代码：

复制代码 
/**
 * 获取用户统计数据
 * @param begin
 * @param end
 * @return
 */
UserReportVO getUserStatistics(LocalDate begin, LocalDate end);

示意图：

3、ReportServiceImpl

位置：sky-server/src/main/java/com/sky/service/impl/ReportServiceImpl.java

添加代码（两个部分）：

复制代码 
@Autowired
private UserMapper userMapper;

/**
 * 获取指定时间段内的用户统计数据
 * @param begin
 * @param end
 * @return
 */
public UserReportVO getUserStatistics(LocalDate begin, LocalDate end) {
    List<LocalDate> dateList = new ArrayList();
    dateList.add(begin);
    // 循环获取日期列表
    while(!begin.equals(end)){
        begin = begin.plusDays(1);
        dateList.add(begin);
    }
 
    // 查询指定日期的用户数量
    // 总用户列表
    List<Integer> totalUserList = new ArrayList();
    // 新增用户列表
    List<Integer> newUserList = new ArrayList();
    for (LocalDate date : dateList) {
        //由于数据库的对应的字段名为create_time形式是年月日时分秒,所以需要将LocalDate转换为LocalDateTime
        LocalDateTime startTime = LocalDateTime.of(date, LocalTime.MIN);// 开始时间, 00:00:00
        LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);// 结束时间, 23:59:59
 
        // 查询新增用户数量
        //select count(distinct user_id) from orders
        // where order_time >= #{startTime} and order_time <= #{endTime}
        Map map = new HashMap();
        map.put("begin", startTime);
        map.put("end", endTime);
        Integer newUser = orderMapper.countDistinctUserId(map);
        // 如果新增用户数量为null,则置为0
        if(newUser == null){
            newUser = 0;
        }
        newUserList.add(newUser);
 
        // 查询总用户数量
        //select count(distinct user_id) from user
        // where create_time >= #{startTime} and create_time <= #{endTime}
        Integer totalUser = userMapper.countDistinctByCreateTime();
        // 如果总用户数量为null,则置为0
        if(totalUser == null){
            totalUser = 0;
        }
        totalUserList.add(totalUser);
    }
 
    //用StringUtil拼接日期列表和用户数量列表
    String join = StringUtil.join(",", dateList);
    String join2 = StringUtil.join(",", totalUserList);
    String join3 = StringUtil.join(",", newUserList);
 
    //创建UserReportVO对象
    UserReportVO build =
            UserReportVO.builder()
                    .dateList(join)//日期列表
                    .totalUserList(join2)//总用户列表
                    .newUserList(join3)//新增用户列表
                    .build();
    return build;
}

示意图：
4、OrderMapper

位置：sky-server/src/main/java/com/sky/mapper/OrderMapper.java

代码：

复制代码 
/**
 * 根据指定时间计算用户数量
 * @return
 */
Integer countDistinctUserId(Map map);

示意图：

5、UserMapper

位置：sky-server/src/main/java/com/sky/mapper/UserMapper.java

代码：

复制代码 
@Select("select count(id) from user")
Integer countDistinctByCreateTime();

示意图：

3-3、测试

相关推荐
浅拾光º5 小时前
mysql重启,服务器计划重启，如何优雅地停止MySQL？
服务器·mysql·adb
正经教主5 小时前
【速成】快速掌握CMD
windows·cmd
牛奶咖啡135 小时前
MySQL在服务器和参数化方面的通用调优策略详解
数据库·mysql·mysql服务器的硬件优化内容·mysql服务器硬盘i/o优化·mysql服务器文件系统优化·mysql服务器内核参数优化·mysql参数优化
间彧5 小时前
好用的redis可视化管理工具
redis
Lynnxiaowen5 小时前
今天继续学习nginx服务部署与配置
linux·运维·服务器·学习·nginx
不宕机的小马达5 小时前
【Maven】Maven概述、安装以及其他相关知识
java·数据库·maven
NetX行者5 小时前
在windows 10系统上使用WSL安装Ubuntu系统并配置开发环境
linux·windows·python·ubuntu·wsl
盖世英雄酱581365 小时前
Where条件顺序会影响索引的使用？
数据库·后端
一人の梅雨6 小时前
小红书开放平台笔记详情接口实战：内容解析与数据挖掘全方案
windows·python
热门推荐
01UV 工具安装与国内镜像源配置指南02Spec-Kit 使用指南03GitHub 镜像站点0446个Nano-banana 精选提示词，持续更新中05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题08KGG转MP3工具|非KGM文件|解密音频09Linux下V2Ray安装配置指南10jdk21下载、安装（Windows、Linux、macOS）