【学习日记2023.6.2】之 管理端报表统计

已于 2023-06-03 00:09:17 修改
阅读量1.3k 收藏
点赞数
分类专栏： 项目之外卖系统 文章标签： 学习 echarts java
于 2023-06-02 21:30:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42575689/article/details/131014324
版权

文章目录

11. 管理端报表统计

  • Apache ECharts
  • 营业额统计
  • 用户统计
  • 订单统计
  • 销量排名Top10

11.1 Apache ECharts

11.1.1 介绍

Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
官网地址：https://echarts.apache.org/zh/index.html
请添加图片描述

常见效果展示：

1). 柱形图
![请添加图片描述](https://img-blog.csdnimg.cn/d8c295fe780445

2). 饼形图
请添加图片描述

3). 折线图
请添加图片描述

**总结：**不管是哪种形式的图形，最本质的东西实际上是数据，它其实是对数据的一种可视化展示。

11.1.2 入门案例

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

效果展示：
请添加图片描述

实现步骤：

1). 引入echarts.js 文件

2). 为 ECharts 准备一个设置宽高的 DOM

3). 初始化echarts实例

4). 指定图表的配置项和数据

5). 使用指定的配置项和数据显示图表

代码开发：

<!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>

使用浏览器方式打开即可。

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

11.2 营业额统计

11.2.1 需求分析和设计

产品原型

营业额统计是基于折现图来展现，并且按照天来展示的。实际上，就是某一个时间范围之内的每一天的营业额。同时，不管光标放在哪个点上，那么它就会把具体的数值展示出来。并且还需要注意日期并不是固定写死的，是由上边时间选择器来决定。比如选择是近7天、或者是近30日，或者是本周，就会把相应这个时间段之内的每一天日期通过横坐标展示。

原型图：
请添加图片描述

业务规则：

  • 营业额指订单状态为已完成的订单金额合计
  • 基于可视化报表的折线图展示营业额数据，X轴为日期，Y轴为营业额
  • 根据时间选择区间，展示每天的营业额数据

接口设计
请添加图片描述

**注意：**具体返回数据一般由前端来决定，前端展示图表，具体折现图对应数据是什么格式，是有固定的要求的。前端需要什么格式的数据，就给它返回什么格式的数据。

11.2.2 代码开发

根据接口定义设计对应的VO：
请添加图片描述

在sky-pojo模块，TurnoverReportVO.java已定义

package com.sky.vo;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class TurnoverReportVO implements Serializable {

 //日期，以逗号分隔，例如：2022-10-01,2022-10-02,2022-10-03
 private String dateList;

 //营业额，以逗号分隔，例如：406.0,1520.0,75.0
 private String turnoverList;

}

营业额TurnoverDTO类

@Data
public class TurnoverDTO {
    private LocalDate orderTime;//下单时间
    private Double turnover;//营业额
}
Controller层

根据接口定义创建ReportController：

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")
@Slf4j
@Api(tags = "统计报表相关接口")
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.getTurnover(begin, end));
    }

}
Service层接口

创建ReportService接口，声明getTurnover方法：

package com.sky.service;

import com.sky.vo.TurnoverReportVO;
import java.time.LocalDate;

public interface ReportService {

    /**
     * 根据时间区间统计营业额
     * @param beginTime
     * @param endTime
     * @return
     */
    TurnoverReportVO getTurnover(LocalDate beginTime, LocalDate endTime);
}
Service层实现类

创建ReportServiceImpl实现类，实现getTurnover方法:

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.commons.lang.StringUtils;
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 getTurnover(LocalDate begin, LocalDate end) {
        //处理X轴所需数据
        List<LocalDate> dateList = new ArrayList<>();
        dateList.add(begin);
        while (!begin.equals(end)){
            begin = begin.plusDays(1);//日期计算，获得指定日期后1天的日期
            dateList.add(begin);
        }
        //处理Y轴所需数据
        Map map = new HashMap();
        map.put("status", Orders.COMPLETED);
        map.put("begin", LocalDateTime.of(dateList.get(0), LocalTime.MIN));
        map.put("end", LocalDateTime.of(end,LocalTime.MAX));
        List<TurnoverDTO> turnoverDTOList = orderMapper.sumByMap(map);
        List<Double> turnoverList = new ArrayList<>();
        for (LocalDate date : dateList) {
            //从turnoverDTOList集合中过滤(筛选)出orderTime与date相等的值
            Optional<TurnoverDTO> optional = turnoverDTOList.stream().filter(turnoverDTO -> {
                return turnoverDTO.getOrderTime().isEqual(date);
            }).findFirst();
            if (optional.isPresent()){
                //匹配到了，取出营业额 ，并添加到turnoverList中
                turnoverList.add(optional.get().getTurnover());
            }else {
                //没有匹配，向turnoverList添加一个0.0
                turnoverList.add(0.0);
            }
        }
        //数据封装
        return TurnoverReportVO.builder()
                .dateList(StringUtils.join(dateList,","))
                .turnoverList(StringUtils.join(turnoverList,","))
                .build();
    }
}
Mapper层

在OrderMapper接口声明sumByMap方法：

    /**
     * 根据map传入的时间查询营业额
     * @param map
     * @return
     */
    List<TurnoverDTO> sumByMap(Map map);

在OrderMapper.xml文件中编写动态SQL：

<select id="sumByMap" resultType="com.sky.dto.TurnoverDTO">
		select date_format(order_time,'%Y-%m-%d') orderTime,sum(amount) turnover from orders
		<where>
			<if test="status != null">
				and status = #{status}
			</if>
			<if test="begin != null">
				and order_time &gt;= #{begin}
			</if>
			<if test="end != null">
				and order_time &lt;= #{end}
			</if>
		</where>
		group by orderTime
	</select>

11.2.3 功能测试

可以通过如下方式进行测试：

  • 接口文档测试
  • 前后端联调测试

启动服务器，启动nginx，直接采用前后端联调测试。

进入数据统计模块

1). 查看近7日营业额统计
请添加图片描述

进入开发者模式，查看返回数据
请添加图片描述

2). 查看近30日营业额统计
请添加图片描述

11.2.4 提交代码

commit—>describe—>push

11.3 用户统计

11.3.1 需求分析和设计

产品原型

所谓用户统计，实际上统计的是用户的数量。通过折线图来展示，上面这根蓝色线代表的是用户总量，下边这根绿色线代表的是新增用户数量，是具体到每一天。所以说用户统计主要统计两个数据，一个是总的用户数量，另外一个是新增用户数量。

原型图：
请添加图片描述

业务规则：

  • 基于可视化报表的折线图展示用户数据，X轴为日期，Y轴为用户数
  • 根据时间选择区间，展示每天的用户总量和新增用户量数据

接口设计
请添加图片描述

11.3.2 代码开发

根据用户统计接口的返回结果设计VO：
请添加图片描述

在sky-pojo模块，UserReportVO.java已定义

package com.sky.vo;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class UserReportVO implements Serializable {

 //日期，以逗号分隔，例如：2022-10-01,2022-10-02,2022-10-03
 private String dateList;

 //用户总量，以逗号分隔，例如：200,210,220
 private String totalUserList;

 //新增用户，以逗号分隔，例如：20,21,10
 private String newUserList;

}

定义UserCountDTO类

public class UserCountDTO implements Serializable {
    private LocalDate createTime;//创建时间
    private Integer userCount;//人数
}
Controller层

根据接口定义，在ReportController中创建userStatistics方法：

/**
     * 用户数据统计
     * @param begin
     * @param end
     * @return
     */
    @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));            
}
Service层接口

在ReportService接口中声明getUserStatistics方法：

	/**
     * 根据时间区间统计用户数量
     * @param begin
     * @param end
     * @return
     */
    UserReportVO getUserStatistics(LocalDate begin, LocalDate end);
Service层实现类

在ReportServiceImpl实现类中实现getUserStatistics方法：

	@Override
    public UserReportVO getUserStatistics(LocalDate begin, LocalDate end) {
       //处理X轴所需的日期数据
        List<LocalDate> dateList = new ArrayList<>();
        dateList.add(begin);
        while (!begin.equals(end)){
            begin = begin.plusDays(1);//日期计算，获得指定日期后1天的日期
            dateList.add(begin);
        }
        //处理Y轴所需的新增用户数据和总用户数据
        Map map = new HashMap();
        map.put("begin", LocalDateTime.of(dateList.get(0), LocalTime.MIN));
        map.put("end", LocalDateTime.of(end,LocalTime.MAX));
        //得到每天新增用户人数的集合
        List<UserCountDTO> userCountDTOList = userMapper.countNewUserByMap(map);
        List<Integer> newUserList = new ArrayList<>();//每天新增用户人数
        List<Integer> totalUserList = new ArrayList<>();//每天总用户人数
        Integer total = userMapper.countTotalUserByCreateTime(dateList.get(0));//获取传入起始日期之前的总人数
        for (LocalDate date : dateList) {
            //筛选集合中createTime和date一致的数据
            Optional<UserCountDTO> optional = userCountDTOList.stream().filter(userCountDTO -> {
                return userCountDTO.getCreateTime().isEqual(date);
            }).findFirst();
            //判断是否存在
            if (optional.isPresent()){
                //存在，将count(新增用户数据)，添加到newUserList中
                newUserList.add(optional.get().getUserCount());
                //总用户在原始总用户的基础上添加当天的新增用户数
                total += optional.get().getUserCount();
            }else {
                //存在，将count(新增用户数据)，添加到newUserList中
                newUserList.add(0);
            }
            totalUserList.add(total);
        }

        //封装并返回VO
        return UserReportVO.builder()
                .dateList(StringUtils.join(dateList,','))
                .newUserList(StringUtils.join(newUserList,','))
                .totalUserList(StringUtils.join(totalUserList,','))
                .build();
    }

在ReportServiceImpl实现类中创建私有方法getUserCount：

	/**
     * 根据时间区间统计用户数量
     * @param beginTime
     * @param endTime
     * @return
     */
    public Integer getUserCount(LocalDateTime beginTime, LocalDateTime endTime) {
        Map map = new HashMap();
        map.put("begin",beginTime);
        map.put("end", endTime);
        return userMapper.countByMap(map);
    }
Mapper层

在UserMapper接口中声明countByMap方法：

    /**
     * 统计日期范围内每天新增用户人数
     * @param map
     * @return
     */
    List<UserCountDTO> countNewUserByMap(Map map);

    /**
     * 查询在查询起始日期前的总用户数
     * @param begin
     * @return
     */
    @Select("select count(*) from user where create_time <= date_format(create_time,'%Y-%m-%d')")
    Integer countTotalUserByCreateTime(LocalDate begin);

在UserMapper.xml文件中编写动态SQL：

<!--统计新增用户人数-->
	<select id="countNewUserByMap" resultType="com.sky.dto.UserCountDTO">
		select date_format(create_time,'%Y-%m-%d') createTime,count(*) userCount from user
		<where>
			<if test="begin != null">
				and create_time &gt;= #{begin}
			</if>
			<if test="end != null">
				and create_time &lt;= #{end}
			</if>
		</where>
		group by createTime
	</select>

11.3.3 功能测试

可以通过如下方式进行测试：

  • 接口文档测试
  • 前后端联调测试

进入数据统计模块

1). 查看近7日用户统计
请添加图片描述

2). 查看近30日用户统计
请添加图片描述

11.3.4 提交代码

commit—>describe—>push

11.4 订单统计

11.4.1 需求分析和设计

产品原型

订单统计通过一个折现图来展现，折线图上有两根线，这根蓝色的线代表的是订单总数，而下边这根绿色的线代表的是有效订单数，指的就是状态是已完成的订单就属于有效订单，分别反映的是每一天的数据。上面还有3个数字，分别是订单总数、有效订单、订单完成率，它指的是整个时间区间之内总的数据。

原型图：
请添加图片描述

业务规则：

  • 有效订单指状态为 “已完成” 的订单
  • 基于可视化报表的折线图展示订单数据，X轴为日期，Y轴为订单数量
  • 根据时间选择区间，展示每天的订单总数和有效订单数
  • 展示所选时间区间内的有效订单数、总订单数、订单完成率，订单完成率 = 有效订单数 / 总订单数 * 100%

接口设计
请添加图片描述

11.4.2 代码开发

根据订单统计接口的返回结果设计VO：
请添加图片描述

在sky-pojo模块，OrderReportVO.java已定义

package com.sky.vo;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class OrderReportVO implements Serializable {

 //日期，以逗号分隔，例如：2022-10-01,2022-10-02,2022-10-03
 private String dateList;

 //每日订单数，以逗号分隔，例如：260,210,215
 private String orderCountList;

 //每日有效订单数，以逗号分隔，例如：20,21,10
 private String validOrderCountList;

 //订单总数
 private Integer totalOrderCount;

 //有效订单数
 private Integer validOrderCount;

 //订单完成率
 private Double orderCompletionRate;

}

下单数量OrderCountDTO类

@Data
public class OrderCountDTO implements Serializable {
    private LocalDate orderTime;//下单时间
    private Integer orderCount;//下单数量
}
Controller层

在ReportController中根据订单统计接口创建orderStatistics方法：

/**
     * 订单数据统计
     * @param begin
     * @param end
     * @return
     */
    @GetMapping("/ordersStatistics")
    @ApiOperation("订单数据统计")
    public Result<OrderReportVO> orderStatistics(
            @DateTimeFormat(pattern = "yyyy-MM-dd")
                    LocalDate begin,
            @DateTimeFormat(pattern = "yyyy-MM-dd")
                    LocalDate end){
		log.info("用户数据统计查询起始日期：{}，终止日期：{}",begin,end);
        return Result.success(reportService.getOrderStatistics(begin,end));
    }
Service层接口

在ReportService接口中声明getOrderStatistics方法：

/**
* 根据时间区间统计订单数量
* @param begin 
* @param end
* @return 
*/
OrderReportVO getOrderStatistics(LocalDate begin, LocalDate end);
Service层实现类

在ReportServiceImpl实现类中实现getOrderStatistics方法：

/**
* 根据时间区间统计订单数量
* @param begin 
* @param end
* @return 
*/
public OrderReportVO getOrderStatistics(LocalDate begin, LocalDate end){
	//处理X轴所需的日期数据
        List<LocalDate> dateList = new ArrayList<>();
        dateList.add(begin);
        while (!begin.equals(end)){
            begin = begin.plusDays(1);//日期计算，获得指定日期后1天的日期
            dateList.add(begin);
        }
        //处理Y轴所需的新增用户数据和总用户数据
        //按照条件统计日期和对应的总订单数
        Map map = new HashMap();
        map.put("begin", LocalDateTime.of(dateList.get(0), LocalTime.MIN));
        map.put("end", LocalDateTime.of(end,LocalTime.MAX));
        //存储数据库中每天订单的数量
        List<OrderCountDTO> list1 = orderMapper.countByMap(map);
        //添加状态条件没统计日期和对应的有效订单数
        map.put("status",Orders.COMPLETED);
        //存储数据库中每天完成订单的数量
        List<OrderCountDTO> list2 = orderMapper.countByMap(map);
        //处理总订单数和有效订单数
        List<Integer> orderCountList = new ArrayList<>();//总订单数集合
        List<Integer> validOrderCountList = new ArrayList<>();//有效订单数集合
        for (LocalDate date : dateList) {
            //处理总订单数据
            Optional<OrderCountDTO> optional1 = list1.stream().filter(orderCountDTO -> {
                return orderCountDTO.getOrderTime().isEqual(date);
            }).findFirst();
            if (optional1.isPresent()){
                orderCountList.add(optional1.get().getOrderCount());
            }else {
                orderCountList.add(0);
            }
            //处理有效订单数据
            Optional<OrderCountDTO> optional2 = list2.stream().filter(orderCountDTO -> {
                return orderCountDTO.getOrderTime().isEqual(date);
            }).findFirst();
            if (optional2.isPresent()){
                validOrderCountList.add(optional2.get().getOrderCount());
            }else {
                validOrderCountList.add(0);
            }
        }
        //3.处理订单总数，有效订单总数，完成率
        //订单总数
        Integer totalOrderCount = orderCountList.stream().reduce(Integer::sum).get();
        //有效订单总数
        Integer validTotalOrderCount = validOrderCountList.stream().reduce(Integer::sum).get();
        //完成率
        Double orderCompletionRate = 0.0;
        if (totalOrderCount != 0){
            orderCompletionRate = validTotalOrderCount.doubleValue() / totalOrderCount.doubleValue();
        }
        return OrderReportVO.builder()
                .dateList(StringUtils.join(dateList,','))
                .orderCountList(StringUtils.join(orderCountList,','))
                .validOrderCountList(StringUtils.join(validOrderCountList,','))
                .totalOrderCount(totalOrderCount)
                .validOrderCount(validTotalOrderCount)
                .orderCompletionRate(orderCompletionRate)
                .build();
}
Mapper层

在OrderMapper接口中声明countByMap方法：

    /**
     * 根据条件查询订单数量
     * @param map
     * @return
     */
    List<OrderCountDTO> countByMap(Map map);

在OrderMapper.xml文件中编写动态SQL：

	<!--根据条件查询订单数量-->
	<select id="countByMap" resultType="com.sky.dto.OrderCountDTO">
		select date_format(order_time,'%Y-%m-%d') orderTime,count(*) orderCount from orders
		<where>
			<if test="status != null">
				and status = #{status}
			</if>
			<if test="begin != null">
				and order_time &gt;= #{begin}
			</if>
			<if test="end != null">
				and order_time &lt;= #{end}
			</if>
		</where>
		group by orderTime
	</select>

11.4.3 功能测试

可以通过如下方式进行测试：

  • 接口文档测试
  • 前后端联调

重启服务，直接采用前后端联调测试。

进入数据统计模块

1). 查看近7日订单统计
请添加图片描述

2). 查看近30日订单统计
请添加图片描述

11.4.4 提交代码

commit—>describe—>push

11.5 销量排名Top10

11.5.1 需求分析和设计

产品原型

所谓销量排名，销量指的是商品销售的数量。项目当中的商品主要包含两类：一个是套餐，一个是菜品，所以销量排名其实指的就是菜品和套餐销售的数量排名。通过柱形图来展示销量排名，这些销量是按照降序来排列，并且只需要统计销量排名前十的商品。

原型图：
请添加图片描述

业务规则：

  • 根据时间选择区间，展示销量前10的商品（包括菜品和套餐）
  • 基于可视化报表的柱状图降序展示商品销量
  • 此处的销量为商品销售的份数

接口设计
请添加图片描述

11.5.2 代码开发

根据销量排名接口的返回结果设计VO：
请添加图片描述

在sky-pojo模块，SalesTop10ReportVO.java已定义

package com.sky.vo;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class SalesTop10ReportVO implements Serializable {

 //商品名称列表，以逗号分隔，例如：鱼香肉丝,宫保鸡丁,水煮鱼
 private String nameList;

 //销量列表，以逗号分隔，例如：260,215,200
 private String numberList;

}

食品名称GoodsSalesDTO类

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class GoodsSalesDTO implements Serializable {
    //商品名称
    private String name;

    //销量
    private Integer number;
}
Controller层

在ReportController中根据销量排名接口创建top10方法：

/**
* 销量排名统计
* @param begin
* @param end
* @return
*/
@GetMapping("/top10")
@ApiOperation("销量排名统计")
public Result<SalesTop10ReportVO> top10(
    @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,
    @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){
    log.info("销量排名Top10查询起始日期：{}，终止日期：{}",begin,end);
	return Result.success(reportService.getSalesTop10(begin,end));
}
Service层接口

在ReportService接口中声明getSalesTop10方法：

/**
* 查询指定时间区间内的销量排名top10 
* @param begin
* @param end
* @return
*/
SalesTop10ReportVO getSalesTop10(LocalDate begin, LocalDate end);
Service层实现类

在ReportServiceImpl实现类中实现getSalesTop10方法：

/**
     * 查询指定时间区间内的销量排名top10
     * @param begin
     * @param end
     * @return
     * */
    public SalesTop10ReportVO getSalesTop10(LocalDate begin, LocalDate end){
        LocalDateTime beginTime = LocalDateTime.of(begin, LocalTime.MIN);
        LocalDateTime endTime = LocalDateTime.of(end, LocalTime.MAX);
        List<GoodsSalesDTO> goodsSalesDTOList = orderMapper.getSalesTop10(beginTime, endTime);

        String nameList = StringUtils.join(goodsSalesDTOList.stream().map(GoodsSalesDTO::getName).collect(Collectors.toList()),",");
        String numberList = StringUtils.join(goodsSalesDTOList.stream().map(GoodsSalesDTO::getNumber).collect(Collectors.toList()),",");

        return SalesTop10ReportVO.builder()
                .nameList(nameList)
                .numberList(numberList)
                .build();
    }
Mapper层

在OrderMapper接口中声明getSalesTop10方法：

/**
* 查询商品销量排名
* @param begin
* @param end
*/
List<GoodsSalesDTO> getSalesTop10(LocalDateTime begin, LocalDateTime end);

在OrderMapper.xml文件中编写动态SQL：

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

11.5.3 功能测试

可以通过如下方式进行测试：

  • 接口文档测试
  • 前后端联调

重启服务，直接采用前后端联调测试。

查看近30日销量排名Top10统计

若查询的某一段时间没有销量数据，则显示不出效果。
请添加图片描述

11.5.4 提交代码

commit—>describe—>push

Yishooo.
关注
专栏目录
Apache ECharts教程
月满闲庭的博客
06-18 958
Apache ECharts教程 5 分钟上手 ECharts ECharts 5 新特性 ECharts 5 升级指南 在打包环境中使用 ECharts ECharts 基础概念概览 个性化图表的样式 ECharts 中的样式简介 异步数据加载和更新 使用 dataset 管理数据 使用 transform 进行数据转换 在图表中加入交互组件 移动端自适应 数据的视觉映射 ECharts 中的事件和行为 动态排序柱状图 小例子：自己实现拖拽 小例子：实现日历图 旭日图 自定义系列 富文本标签 服务端渲染
使用Apache ECharts
weixin_49666931的博客
10-18 933
Apache Echarts是一个基于 JavaScript 的开源可视化图表库，里面拥有各种样式的图表，可根据自己需求来制作出想要的图表效果，以下是Apache Echarts官网的示例截图，有需要的可自行去官网查看。 想要用到图表库里面的图表就必须在官网下载好所想要的文件，以下是所需文件的截图，详细下载教程Apache Echarts的官网可以查看。 下载好文件之后就要在项目里面引入Echarts，这样就可以进行图表绘制了。 在绘图前我们需要为 ECharts 准备一个定义了高宽.
Apache ECharts
qq_46030254的博客
06-10 331
Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。1). 柱形图2). 饼形图3). 折线图不管是哪种形式的图形，最本质的东西实际上是数据，它其实是对数据的一种可视化展示。
Apache ECharts快速入门
有趣的代码
10-01 2215
Apache ECharts 快速入门
使用Apache ECharts来绘制曲线图
qq_40138803的博客
05-29 1236
通过Apache ECharts轻松简单绘制好看的各种图表
Apache ECharts 使用教程
最新发布
gitblog_00253的博客
08-07 444
Apache ECharts 使用教程 echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址:https://gitcode.com/gh_mirrors/echarts16/echarts 项目介绍 Apache ECharts 是一个基于...
mkl-2023.1.0-py2.py3-none-win_amd64.whl
05-22
Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和...
8--[小猫的探险日记2.邪险世界].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码
04-16
8--[小猫的探险日记2.邪险世界].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码8--[小猫的探险日记2.邪险世界].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码8--[小猫的探险日记2.邪险世界].zip...
664819637993948麻豆日记app.apk
10-18
664819637993948麻豆日记app.apk
Android应用源码之日记本.zip
09-03
【Android应用源码之日记本.zip】是一个包含Android应用程序源代码的压缩文件，重点在于学习和研究Android开发。这个源码实例很可能是一个简单的日记应用程序，它可以帮助开发者理解如何在Android平台上构建用户友好...
艾宾浩斯学习单词日记.xlsx
04-26
Excel表格记录艾宾浩斯学习单词日记
echarts：Apache ECharts是用于浏览器的功能强大的交互式图表和数据可视化库
02-05
Apache ECharts Apache ECharts是一个免费的，功能强大的图表和可视化库，它提供了一种简单的方法来向您的商业产品中添加直观，交互式和高度可定制的图表。 它使用纯JavaScript编写，并基于 ，这是一个全新的轻量级画布库。 | 获取Apache ECharts 您可以选择以下方法之一： 从官方网站 从官方网站下载 npm install echarts --save CDN： 文件 讲解 API 选件手册 得到帮助 漏洞报告和功能请求的 电子邮件提出一般问题 订阅以更新项目 建立 构建echarts源代码： 执行echarts的根目录中的指示信息：（需要
echarts:Apache ECharts是用于浏览器的功能强大的交互式图表和数据可视化库
05-11
Apache ECharts Apache ECharts是一个免费的，功能强大的图表和可视化库，它提供了一种简单的方法来向您的商业产品添加直观，交互式和高度可定制的图表。 它是用纯JavaScript编写的，并基于 ，它是一个全新的轻量级画布库。 | 获取Apache ECharts 您可以选择以下方法之一： 从官方网站 从官方网站下载 npm install echarts --save CDN： 文件 教程 原料药 选件手册 得到帮助 漏洞报告和功能请求的 电子邮件以获得一般问题 订阅以更新项目 建造 构建echarts源代码： 执行echarts的根目录中的指令：（需要 ） # Install the dependencies from NPM: npm install # Rebuild source code immediately in watch mode
（前端）使用Apache ECharts绘制可视化图表
weixin_64388392的博客
11-22 1151
使用Apache ECharts绘制前端可视化图表（动态折线图示例）
Apache ECharts使用教程，vue中使用图表教程
欢迎欢迎
02-16 1086
简介 这里先说一下什么是echarts如果你已经了解它是什么直接往下看教程 ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 遵循 Apache-2.0 开源协议，免费商用。 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。 在项目中引入 Apache ECharts 假如你的开发环境使用了npm或者yarn等包管理工具，并且使用 Webpack 等打包工具进行构建，本文
Apache ECharts简单介绍及入门案例
m0_51487124的博客
08-09 552
Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html1). 柱形图2). 饼形图3). 折线图**总结：**不管是哪种形式的图形，最本质的东西实际上是数据，它其实是对数据的一种可视化展示。
高度个性化定制的数据可视化图表工具-Apache ECharts 使用指南
图灵的猫的博客
01-21 1488
Apache ECharts 使用指南 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 Apache ECharts 官网 柱状图 基本柱状图 ```echarts option = { xAxis: { data: ['A', 'B', 'C', 'D
Apache ECharts简介和相关操作
哥的时代，为你保驾护航
11-01 934
Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。常见效果展示：1.柱形图：2.饼形图：3.折线图不管是那种图形，其本质就是数据使用Echarts，重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据，然后响应给前端来展示图表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值