JavaWeb(苍穹外卖)--学习笔记17(Apache Echarts)

发布于:2025-08-11 ⋅ 阅读:(9) ⋅ 点赞:(0)

前言

本篇文章是学习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,200
    private String numberList;

}

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


    @Autowired
    private 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类:


    @Autowired
    private OrderMapper orderMapper;
 /**
     * 统计指定时间区间内的销量排名top10
     * @param begin
     * @param end
     * @return
     */
    @Override
    public 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) number
        from orders o, order_detail od
        where 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.name
        order by number desc
    </select>

🙌这个SQL语句比较难,我解释一下:

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

  1. select od.name, sum(od.number) number: 选择要查询的字段。
    od.name: 从 order_detail 表中选择商品名称。
    sum(od.number) number: 计算每个商品的销售数量总和,并将这个计算结果的列别名为 number。

  2. from orders o, order_detail od: 指定查询的数据来源表。这里使用了旧式的逗号分隔的表连接方式。

  3. 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 可能代表“已完成”或“已支付”等最终状态,确保只统计已成功完成的订单的销售数据。

  4. >= 是 >= 的 HTML 实体编码。<= 是 <= 的 HTML 实体编码。

  5. group by od.name: 按照商品名称 (od.name) 进行分组。这意味着 sum(od.number) 会计算每个不同商品名称的销售数量总和。
    order by number desc: 按照计算出的销售总和 (number) 进行降序排列 (desc)。销售量最高的商品会排在最前面。
    总结

小白啊!!!写的不好轻喷啊🤯如果觉得写的不好,点个赞吧🤪(批评是我写作的动力)

…。。。。。。。。。。。…请添加图片描述

…。。。。。。。。。。。…


网站公告

今日签到

点亮在社区的每一天
去签到