进销存报表与 ECharts 可视化实战

发布时间：2026-10-04 | 分类：报表与数据可视化

"这个月卖得怎么样？哪些商品压货了？哪个客户最赚钱？"老板每天问的都是这三个问题。报表是进销存系统价值的最终呈现，而图表比数字表格更能让人一眼看懂趋势。本文以我们 Web 版进销存的三类核心报表为例，讲清图表选型和 ECharts 落地的关键决策。

一、三类核心报表与图表选型

选型原则：趋势用线、对比用柱、占比用环、分布用点。进销存报表几乎不需要饼图之外的炫技图表，克制本身就是专业。

二、查询性能：报表慢的根子在数据层

单据量过百万后，报表慢通常不是 ECharts 的锅，而是 SQL 的锅。三个优化动作按收益排序：

1. 预聚合表：建一张日报汇总表（日期 × 商品 × 仓库 × 数量 × 金额），单据审核时同步写汇总，报表只查汇总表，查询量从百万行降到万行级。
2. 合理的复合索引：按最常见的查询条件建索引，如 (warehouse_id, biz_date)，用 EXPLAIN 验证走了索引。
3. 分页与采样：明细报表必须分页；趋势图超过 366 个点按周/月聚合，300 个点和 3000 个点肉眼没有区别。

预聚合表的设计要和单据状态流转联动：审核写正向数、反审核写冲减，保证汇总表永远等于明细之和。每天跑一次对账任务校验两者一致，发现漂移立即报警。

三、ECharts 大数据量渲染优化

即使数据层优化完，年度明细趋势仍可能有上万点。ECharts 端四条经验：

• 关掉不必要的动画：animation: false，数据量大时动画是卡顿首因。
• 开启增量渲染：lazyUpdate: true + notMerge: true，配合 setOption 按需更新。
• 大数据用采样：ECharts 自带 sampling: 'lttb'（最大三角保持采样），万级点降到千级而保留形状特征，开启后渲染时间降一个数量级。
• 视口外不渲染：Tab 页隐藏的图表先不初始化，切换时再 init，避免一次渲染五六张图。

四、交互设计：筛选器比图表本身更重要

报表页的标准配置：顶部一排筛选器（时间范围、仓库、品类、客户），图表随筛选联动。两个细节：

• 默认值即答案：默认展示"本月 · 全部仓库"，老板打开页面第一眼就是他要的数字，不让用户先点四下筛选。
• 下钻路径：点趋势图的某一天，跳到该日明细表；点品类条形，跳到该品类商品排行。图表是入口，表格是终点。

五、导出：打印与 Excel 双通道

报表必须能带走。两种导出：屏幕上的图表用 打印样式 直接输出 PDF；数据本身走服务端生成 Excel（数据超过 5 万行不要用前端导出库，浏览器内存扛不住）。导出的 Excel 带筛选条件页签，财务对账时知道这份数据是什么口径。

结语

进销存报表的完整链路是：单据状态驱动预聚合 → 聚合表支撑快速查询 → ECharts 克制选型 → 筛选交互直达答案 → 导出带走归档。每一步都不复杂，但环环相接才能撑起"秒开"的报表体验。