day11

5 阅读2分钟

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/endLocalDate,但查库通常用 LocalDateTime(每天的 MIN/MAX)。
  • sum() 可能返回 null,记得兜底 0。
  • 日期循环要包含 end(实现是 while (!begin.equals(end)) begin=begin.plusDays(1))。

3) 用户统计 User

业务规则

  • 折线图两条线:用户总量 + 新增用户量(每天)

VO

UserReportVOdateList / 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

SalesTop10ReportVOnameList / numberList 逗号分隔。

SQL 核心点(最重要)

  • order_detail 按商品名聚合 sum(number)
  • 关联 orders,限定 o.status = 5(已完成)
  • 时间区间过滤 + order by number desc limit 10