实验2 数据看板的设计与实现

电商销售数据看板（进阶版）实验报告

一、实验目的

本实验以电商销售数据为业务场景，完成数据看板从需求分析、版面设计、数据处理到看板落地的完整流程，具体目的如下：

• 掌握数据看板的基本概念、核心功能与应用场景，理解数据可视化、数据大屏、实时看板的区别与联系；
• 熟悉数据看板的设计原则与布局规范，包括视觉层级、色彩搭配、图表选型、信息降噪与适配布局等核心设计逻辑；
• 学会根据业务数据特征选择适配的可视化图表（柱状图、折线图、饼图、仪表盘、数据卡片等），实现数据的直观展示与维度分析；
• 培养数据思维与可视化设计能力，能够独立完成从需求分析、版面设计、数据处理到看板落地的完整流程；
• 理解静态看板与动态实时看板的差异，掌握数据刷新、动态轮播、联动交互等基础功能的实现原理。

二、实验环境

硬件环境：计算机、网络环境。软件环境：Windows 操作系统、现代浏览器（Edge）、Visual Studio Code 开发工具。

技术栈：Python 3.13 作为运行环境，Streamlit 1.65.0 搭建看板页面，Pandas 3.0.6 完成数据处理，Plotly 7.1.0 生成可视化图表，openpyxl 支持 Excel 文件读写。

三、实验内容与过程

（一）需求分析与版面设计

自选电商销售数据场景，数据窗口为 2026-10-10 21:00 至 2026-10-11 20:59（近24小时，小时粒度），核心展示需求为销售额、订单量、客单价、转化率、履约与退款等运营指标，以及品类、渠道、商品、时段等多维分析。

看板版面划分为四大模块：数据概览区（KPI 数据卡片）、维度统计区（分类对比与占比图表）、趋势分析区（时间序列图表）、明细数据区（订单与商品明细表）。

整体采用深色科技风配色：背景色 #0d1117、卡片底色 #161b22、主色 #00d4ff（数据强调）、辅助色 #ff6b35 与 #a855f7（预警与对比）、文本色 #e6edf3 与 #8b949e，保证视觉层级清晰、信息降噪。

（二）数据准备与预处理

使用脚本生成模拟数据集并保存为 CSV 与 Excel 格式，共生成订单明细 4,205 行，覆盖 4 个销售渠道（APP、小程序、直播、线下）、5 个商品类目、7 个销售地区、4 种订单状态。

为验证数据清洗能力，向原始数据中注入 101 条脏数据，包括：缺失值 50 条、重复记录 12 条、负金额 8 条、单价超 2000 元 6 条、零销量 6 条、越界时间 5 条、空白地区 8 条、乱码状态 6 条（如”巳完戌”）。

预处理脚本按规则清洗：剔除缺失行、按内容去重（排除订单号列）、剔除负金额与超高价与零销量记录、剔除越界时间、去除空白地区、乱码状态映射为合法状态。清洗后得到干净订单 4,119 行，sales_metrics 指标表由清洗后订单重新聚合，与订单明细口径差异为 0 元、0 单，保证指标自洽。

（三）基础可视化图表搭建

基于预处理数据完成 6 种以上图表组件：

• 数据卡片 6 张：总销售额、总订单数、客单价、转化率、待发货订单、退款率，并标注较上一时段的环比变化；
• 柱状图：品类销售额对比（数码电器、美妆个护、服饰鞋包、食品生鲜、家居日用）；
• 环形图：渠道销售额占比（APP 39.8%、小程序 25.1%、直播 20.2%、线下 14.9%）；
• 折线/面积图：近24小时销售额、订单量、转化率时间趋势；
• 横向条形图：商品销售额 Top10 排行榜。

图表构建函数统一接收过滤后的 DataFrame 作为入参，返回 Plotly 图形对象，供基础版与进阶版看板复用，保证同一数据源的图表口径一致，并通过测试脚本验证图表聚合结果与订单明细一致。

（四）静态数据看板整合实现

基础版看板（app.py）将标题栏、KPI 数据卡片、维度统计三栏（柱状图、环形图、Top10）、趋势分析三图（销售额、订单量、转化率）与订单明细表整合到同一页面，通过深色 CSS 统一字体、颜色、间距与卡片样式，实现整洁清晰的静态看板效果。使用 Streamlit AppTest 无头测试验证页面无异常、标题与四大模块齐全。

（五）进阶功能实现

进阶1 动态视觉效果优化：为 KPI 数值添加滚动动画、组件渐入动画、经营播报轮播（约 3.5 秒切换）、图表 hover 悬浮提示，并通过媒体查询实现自适应布局，避免页面错位与溢出。

进阶2 图表联动与筛选功能实现：侧边栏提供 3 个多选筛选器（销售渠道、商品类目、订单状态）与时间范围滑块（近 N 小时），筛选后所有图表与指标同步更新；页面提供品类联动按钮，点击后可聚焦展示对应品类的统计视图，交互状态由 session_state 管理。

进阶3 多维度数据分析可视化：新增渠道×时段销售额热力图、品类×渠道销售结构雷达图、3 个进度仪表盘（销售额、转化率、客单价达成率），以及热销商品 Top8（绿色标注）与滞销商品 Top8（红色标注）双榜单，实现数据对比、预警与极值展示。

四、实验结果与验证

（一）KPI 指标核验

对清洗后订单数据独立重算核心指标，与预处理阶段生成的 kpi_summary.txt 基线逐项对照，六项指标全部一致，结果如表1所示。

指标	独立重算	基线（kpi_summary.txt）	结论
总销售额	¥799,540.61	799540.61	一致
总订单数	4,119	4119	一致
客单价	¥194.11	194.11	一致
转化率	4.43%	4.43	一致
待发货订单	1,017	1017	一致
退款率	5.07%	5.07	一致

表1 KPI 指标核验结果（独立重算 vs 基线）

（二）看板运行截图

两版看板在本地服务启动后，通过浏览器真实渲染并截图验证。基础版看板完整呈现四大模块，图表与数据均正常显示，如图1、图2所示。

图1 基础版看板首屏

图2 基础版看板中部

进阶版看板集成动态效果、筛选联动与多维分析组件，首屏与中部如图3、图4所示。

图3 进阶版看板首屏

图4 进阶版看板中部

两版看板页尾均以明细数据收尾：基础版底部为订单明细表与商品状态表，进阶版底部在左侧多维筛选面板之外展示商品档案表（含热销/正常/滞销状态标注），如图5、图6所示。

图5 基础版看板底部

图6 进阶版看板底部

（三）自动化测试结果

• test_charts.py：验证全部图表组件与订单聚合结果一致，通过；
• test_app.py：基础看板 AppTest 无头测试 0 异常，标题、KPI 卡片、四大模块均存在，通过；
• test_app_advanced.py：进阶看板 AppTest 无头测试 0 异常，经营播报、筛选器、联动按钮、多维模块均存在，且代码不依赖外部网络资源，通过；
• 浏览器渲染验证：以 headless Edge 打开看板页面，图表均正常渲染（非空白），截图 OCR 复核数据与 KPI 基线一致。

五、遇到的问题及解决方法

• 图表渲染空白问题：初版使用 plotly.io.to_html 且 include_plotlyjs 指向外网 CDN，运行环境无法访问外网导致图表空白。解决方法：改用 Streamlit 内置的 st.plotly_chart 离线渲染，彻底去除外网依赖，截图验证通过；
• Plotly 7.x 语法差异：仪表盘（gauge）的 axis 不再支持 gridcolor 属性，构造时抛出 ValueError。解决方法：改用 tickcolor 属性设置刻度颜色，兼容新版 API；
• 截图自动化中页面无法滚动：新版 Streamlit 的滚动容器为 .stMain 而非 body，直接对窗口滚动无效。解决方法：定位 .stMain 容器并设置其 scrollTop 完成分屏截图；
• 客单价超出设计区间：初版价格分布导致客单价约 282 元，超出 100–200 元目标。解决方法：调整价格分层（88% 常规价 29–199 元 + 12% 大额价 200–400 元），并设置价格-销量系数，最终客单价 194.11 元落入目标区间。

六、实验总结

本实验以电商销售数据为场景，完成了数据看板从需求分析、版面设计、数据生成与清洗、图表搭建、静态看板整合到进阶动态交互的完整流程。基础任务部分完成了四大模块版面设计与静态看板整合；进阶任务部分实现了动态视觉效果、图表联动筛选与多维度分析组件。

通过本实验，掌握了数据看板的设计原则与图表选型方法，熟悉了 Streamlit 与 Plotly 的工程化开发流程，理解了离线渲染、交互状态管理与自适应布局等关键技术点，并积累了数据清洗与口径自洽的实践经验。后续可在此基础上拓展实时数据源接入、指标预警、大屏与移动端适配等扩展任务，进一步提升看板的实用性与工程价值。