运营数据报表可视化产品系统

为运营部门开发的数据可视化系统，替代手工Excel统计，实现核心指标的实时展示和多维度分析。

1. 数据看板：顶部展示关键指标卡片（总用户数、新增、活跃率等），中间区域展示趋势折线图和占比饼图，底部展示数据明细表格。
2. 多维度筛选：支持日期范围、渠道、地区等多条件组合筛选，使用RxJS的combineLatest监听筛选条件变化，加入防抖避免频繁请求，筛选条件持久化到localStorage。
3. 图表交互下钻：点击柱状图/折线图的数据点，弹出侧边抽屉展示该日期的详细数据明细，支持导出。
4. 报表导出：支持将当前看板导出为图片（html2canvas），或将明细数据导出为Excel（xlsx/SheetJS）。
5. 图表主题适配：ECharts图表跟随系统深色/浅色主题自动切换配色，切换时平滑重新渲染。

1. 整体技术架构

层级 技术选型 说明
框架 Angular 12+ 组件化开发
语言 TypeScript 类型安全
图表 ECharts 5.x 数据可视化
状态管理 RxJS 响应式数据流
样式 SCSS + CSS变量 主题切换
导出 html2canvas + xlsx 图片/Excel导出
HTTP Angular HttpClient 接口调用
持久化 localStorage 筛选条件/主题偏好

2. 核心模块实现

模块一：数据看板组件（DashboardComponent）

```
主要职责：整合所有子组件，管理筛选状态

关键实现：
- 使用BehaviorSubject存储当前筛选条件
- 通过RxJS的combineLatest监听筛选条件变化
- 筛选条件变化时，自动触发所有图表组件的数据刷新
- 使用debounceTime防抖，避免频繁请求
```

模块二：筛选组件（FilterComponent）

```
主要职责：收集用户筛选条件，向父组件传递

关键实现：
- 使用Reactive Forms构建筛选表单
- 日期范围选择器使用第三方库（如ngx-datepicker）
- 筛选条件通过@Output()传递给父组件
- 筛选条件保存到localStorage，页面刷新时恢复
```

模块三：图表组件（ChartComponent）

```
主要职责：接收筛选条件，调用接口渲染图表

关键实现：
- 使用@Input()接收筛选条件
- 调用后端接口获取图表数据
- 初始化ECharts实例，绑定数据和配置
- 监听窗口resize事件，调用echarts.resize()
- 封装通用的图表配置（主题、tooltip、legend等）
```

模块四：主题切换服务（ThemeService）

```
主要职责：管理深色/浅色主题

关键实现：
- 定义两套CSS变量（浅色主题变量、深色主题变量）
- 使用Renderer2在body上添加/移除主题class
- 主题切换时，通过EventEmitter通知所有图表组件
- 图表组件收到通知后，更新ECharts主题配置
```

模块五：导出服务（ExportService）

```
主要职责：提供图片导出和Excel导出功能

关键实现：
- 图片导出：使用html2canvas将DOM转为canvas，再转为图片下载
- Excel导出：调用后端接口获取数据，使用xlsx库生成文件
- 大数据量时，后端异步生成，前端轮询下载链接
```

3. 关键技术难点与解决方案

难点 解决方案
多个图表同时刷新，接口请求过多 使用RxJS的forkJoin合并请求，或后端提供聚合接口
筛选条件频繁变化，请求过于密集 使用debounceTime防抖，用户停止操作300ms后再请求
图表在深色/浅色主题间切换 定义两套ECharts主题配置，调用setOption更新
图表容器大小变化时需重新适配 使用ResizeObserver监听容器大小，调用echarts.resize()
大数据量Excel导出导致接口超时 改为异步导出：提交任务→轮询状态→下载文件