IMS系统报表与数据分析系统设计
1. 报表系统架构
IMS 报表系统采用分层架构设计:
- 数据层:从业务数据库抽取、清洗、聚合
- 服务层:提供指标计算、报表生成 API
- 前端层:图表渲染、交互、导出
业务流程:
业务库 → ETL → 数据仓库 → 指标服务 → 前端图表 → 导出/打印
2. 指标体系建设
指标体系是报表系统的核心,建议采用北极星指标 + 多维分析模型。
指标分类
- 原子指标:不可拆分的最小计数单位(如订单数、销售额)
- 派生指标:原子指标 + 时间周期 + 筛选条件(如「本月销售额」)
- 复合指标:多个指标计算得出(如「客单价 = 销售额 / 订单数」)
/* 指标定义表结构 */
CREATE TABLE rpt_metric (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
metric_key VARCHAR(64) NOT NULL, /* 指标标识 */
metric_name VARCHAR(128) NOT NULL, /* 指标名称 */
metric_type TINYINT, /* 1:原子 2:派生 3:复合 */
formula VARCHAR(512), /* 复合指标的计算公式 */
unit VARCHAR(32), /* 单位:元、个、天 */
aggregation VARCHAR(32) /* 聚合方式:sum/avg/count/max/min */
);
/* 维度表 */
CREATE TABLE rpt_dimension (
id BIGINT PRIMARY KEY,
dim_key VARCHAR(64),
dim_name VARCHAR(128),
levels JSON /* 支持的层级:省-市-区 */
);
3. 数据仓库设计
对于中小型 IMS,推荐使用宽表模式 + 定时聚合。
/* 日报表宽表 - 每日凌晨聚合计算 */
CREATE TABLE rpt_daily_order (
stat_date DATE NOT NULL,
region_id BIGINT,
product_category_id BIGINT,
order_count INT DEFAULT 0,
order_amount DECIMAL(12,2) DEFAULT 0,
avg_amount DECIMAL(10,2),
user_count INT DEFAULT 0,
refund_count INT DEFAULT 0,
PRIMARY KEY (stat_date, region_id, product_category_id)
);
/* 聚合存储过程(每日定时执行) */
INSERT INTO rpt_daily_order (stat_date, region_id, ...)
SELECT
CURDATE() AS stat_date,
region_id,
COUNT(*) AS order_count,
SUM(amount) AS order_amount,
...
FROM ord_order
WHERE DATE(created_at) = CURDATE()
GROUP BY region_id;
4. 图表选型与实现
常见的图表类型及适用场景:
- 折线图:趋势分析,展示随时间变化的指标
- 柱状图:对比分析,不同类别、数值比较
- 饼图/环形图:占比分析,部分占总体的比例
- 散点图:相关性分析,两个数值变量的关系
- 漏斗图:转化分析,各阶段转化率
- 热力图:密集度分析,如用户活跃时段
纯 CSS 实现简单图表
/* 纯 CSS 柱状图 */
.bar-chart {
display: flex;
align-items: flex-end;
height: 200px;
gap: 10px;
padding: 20px;
background: var(--bg2);
border-radius: 8px;
}
.bar {
flex: 1;
background: linear-gradient(180deg, var(--accent), var(--accent2));
border-radius: 4px 4px 0 0;
transition: height 0.3s;
position: relative;
}
.bar:hover {
opacity: 0.85;
}
.bar::after {
content: attr(data-value);
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: var(--text);
}
5. 看板搭建
仪表盘(Dashboard)将多个图表组合,提供全貌视图。
/* 看板布局 - CSS Grid */
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto auto;
gap: 16px;
padding: 20px;
}
.card { grid-column: span 1; }
.card.wide { grid-column: span 2; }
.card.full { grid-column: span 4; }
/* 响应式:移动端单列 */
@media (max-width: 768px) {
.dashboard { grid-template-columns: 1fr; }
.card, .card.wide, .card.full { grid-column: span 1; }
}
实施建议:报表系统初期建议采用直接查询业务库,性能不够再考虑数据仓库;图表优先使用 ECharts 或 Chart.js;提供导出 Excel/PDF 功能满足办公需求;考虑权限控制,不同角色看到不同的数据范围。