当前位置：首页 > news >正文

JavaWeb（苍穹外卖）--学习笔记17（Apache Echarts）

news 2025/8/11 9:07:36

前言

本篇文章是学习B站黑马程序员苍穹外卖的学习笔记📑。我的学习路线是Java基础语法-JavaWeb-做项目，管理端的功能学习完之后，就进入到了用户端微信小程序的开发，用户端开发的流程大致为用户登录—商品浏览（其中涉及到缓存，之前写过）—添加/查看/清空购物车—下单支付（到现在没搞懂😵‍💫）—地址簿—订单查询/超时/取消处理（巨多）…还有我没学到的🤪🤪，下面到了统计，具体呢就是从数据库查找，统计一下数据在一柱状图的形式返回到前端。

先来了解一下什么是Apache ECharts

Apache Echarts
是一个基于 JavaScript 的开源可视化库，用于在网页上生成各种交互式的图表和数据可视化。它是由百度公司发起，并于2018年捐赠给 Apache 软件基金会，成为 Apache 的顶级项目之一。ECharts 提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图等常见图表，同时也支持地图、热力图等更复杂的可视化形式。

其实这个主要是前端（我就是稍微简单对着看了看，还是主要学后端🤪）

在这里插入图片描述
来看看前端了解一下功能：

统计界面的开发分为营业额统计，用户统计，订单统计，和销量排名TOP10，在数据库中查找昨日，近7日，近30日，本周，本月的数据返回给前端，这里以销量排名TOP10为例子。

还是先看一下项目接口文档：
在这里插入图片描述

通过接口文档来写返回值的类

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,200private String numberList;}

ReportController类：从前端接受要查找的时间

@Autowiredprivate ReportService reportService;/*** 销量排名Top10* @param begin* @param end*/@GetMapping("/top10")@ApiOperation("销量排名Top10")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));}

ReportServer接口：

    /*** 统计指定时间区间内的销量排名* @param begin* @param end* @return*/SalesTop10ReportVO getSalesTop10(LocalDate begin, LocalDate end);

ReportServerImpl类：

@Autowiredprivate OrderMapper orderMapper;/*** 统计指定时间区间内的销量排名top10* @param begin* @param end* @return*/@Overridepublic SalesTop10ReportVO getSalesTop10(LocalDate begin, LocalDate end) {LocalDateTime beginTime = LocalDateTime.of(begin, LocalTime.MIN);LocalDateTime endTime = LocalDateTime.of(end, LocalTime.MAX);List<GoodsSalesDTO> salesTop10 = orderMapper.getSalesTop10(beginTime, endTime);List<String> nameList = salesTop10.stream().map(GoodsSalesDTO::getName).collect(Collectors.toList());List<Integer> numberList = salesTop10.stream().map(GoodsSalesDTO::getNumber).collect(Collectors.toList());return SalesTop10ReportVO.builder().nameList(StringUtils.join(nameList, ",")).numberList(StringUtils.join(numberList, ",")).build();}

OrderMapper类：

/*** 统计规定时间内的销量排名前10* @param begin* @param end* @return*/List<GoodsSalesDTO> getSalesTop10(LocalDateTime begin, LocalDateTime end);

    <select id="getSalesTop10" resultType="com.sky.dto.GoodsSalesDTO">select od.name, sum(od.number) numberfrom orders o, order_detail odwhere o.id = od.order_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.nameorder by number desc</select>

🙌这个SQL语句比较难，我解释一下：

这是一个 MyBatis 框架中的 SQL 映射语句，用于从数据库中查询在指定时间段内销售量排名前 10 的商品。

select od.name, sum(od.number) number: 选择要查询的字段。
od.name: 从 order_detail 表中选择商品名称。
sum(od.number) number: 计算每个商品的销售数量总和，并将这个计算结果的列别名为 number。
from orders o, order_detail od: 指定查询的数据来源表。这里使用了旧式的逗号分隔的表连接方式。
where o.id = od.order_id and o.status = 5: 定义查询条件。
o.id = od.order_id: 将 orders 表和 order_detail 表通过订单 ID (id 和 order_id) 进行连接，确保只查询属于同一订单的记录。
o.status = 5: 只查询订单状态 (status) 为 5 的订单。通常，状态 5 可能代表“已完成”或“已支付”等最终状态，确保只统计已成功完成的订单的销售数据。
>= 是 >= 的 HTML 实体编码。<= 是 <= 的 HTML 实体编码。
group by od.name: 按照商品名称 (od.name) 进行分组。这意味着 sum(od.number) 会计算每个不同商品名称的销售数量总和。
order by number desc: 按照计算出的销售总和 (number) 进行降序排列 (desc)。销售量最高的商品会排在最前面。
总结