Apache ECharts + 数据统计 4 个报表:营业额、用户、订单、销量Top10。
day11 你要做成什么效果
数据统计页会用图表展示 4 类数据:营业额统计、用户统计、订单统计、销量排名Top10。
核心思想:ECharts 负责“画图”,但图表最本质是数据;后端要按前端需要的格式返回数据。
1) Apache ECharts(只需要掌握“数据格式”这一点)
ECharts 是基于 JavaScript 的数据可视化库。
入门 demo 的关键步骤:引入 echarts.js → 准备有宽高的 DOM → echarts.init() → setOption()。
你在这个项目里不用深挖图表配置,重点是:前端要什么格式,你就返回什么格式。
2) 营业额统计 Turnover
业务规则
- 营业额 = 订单状态为“已完成”的订单金额合计
- 按天展示:X 轴日期,Y 轴营业额;日期区间由时间选择器决定(近7天/近30日/本周等)
返回数据格式(后端适配前端)
VO:TurnoverReportVO
dateList:逗号分隔日期串turnoverList:逗号分隔营业额串
接口与核心实现
- 接口:
GET /admin/report/turnoverStatistics?begin=yyyy-MM-dd&end=yyyy-MM-dd - Service 思路:生成 begin~end 的日期列表;对每天拼出 00:00:00
~23:59:59 查询;金额sum为空(null)要变 0。 - Mapper 动态 SQL:按
status/begin/end组合条件统计sum(amount)。
常见坑
begin/end是 LocalDate,但查库通常用LocalDateTime(每天的 MIN/MAX)。sum()可能返回null,记得兜底 0。- 日期循环要包含 end(实现是
while (!begin.equals(end)) begin=begin.plusDays(1))。
3) 用户统计 User
业务规则
- 折线图两条线:用户总量 + 新增用户量(每天)
VO
UserReportVO:dateList / totalUserList / newUserList 都是逗号分隔字符串。
核心实现
-
Controller:
GET /admin/report/userStatistics(参数 begin/end)。 -
Service:每天两次统计
- 新增用户:
create_time in [beginTime, endTime] - 总用户:
create_time <= endTime(beginTime 传 null)
- 新增用户:
-
Mapper:动态 SQL
count(id),begin/end 为空就不拼条件。
4) 订单统计 Order
业务规则
- 有效订单:状态为 已完成
- 展示:每天订单总数 + 每天有效订单数;并汇总区间内 总订单、有效订单、完成率(有效/总 *100% 的概念,代码里通常用比例值)。
VO
OrderReportVO:日期/每日总单/每日有效单(字符串列表)+ totalOrderCount / validOrderCount / orderCompletionRate。
核心实现
- Service:每天统计两类 count(status 传 null 表示查全部;status=COMPLETED 查有效)
- 汇总:对列表
stream().reduce(sum)得到区间总数;完成率注意除数为 0 的情况。 - Mapper:
countByMap动态 SQL(同营业额那套拼法)。
5) 销量排名 Top10
业务规则
- 统计时间区间内销量前 10(菜品 + 套餐,本质都是“商品”);销量是销售份数。
VO
SalesTop10ReportVO:nameList / numberList 逗号分隔。
SQL 核心点(最重要)
order_detail按商品名聚合sum(number)- 关联
orders,限定o.status = 5(已完成) - 时间区间过滤 +
order by number desc limit 10