资讯动态

用 Streamlit、Pandas 和 Plotly 实现电商销售数据看板

发布时间:2026/10/15 3:51:04 来源:尧图企业网站定制
2026 年 10 月 14 日本次实验选择电商销售作为业务场景使用 Streamlit、Pandas 和 Plotly实现数据概览、维度统计、趋势分析和明细数据四个模块。在基础看板之外加入了日期与分类筛选、点击品类联动、悬浮提示、热力图、商品排行以及 CSV 和离线 HTML 报告导出。实验数据采用固定随机种子生成共 559 条原始记录清洗后保留 540 条。默认展示最近 30 天销售额为68,413.35 元共180 笔订单平均客单价为380.07 元相较前一个等长时段下降1.45%。30 项测试全部通过筛选、图表联动和导出也经过实际浏览器操作验证。一、实验目的与业务需求看板需要回答几个具体问题当前卖了多少有多少订单哪些品类贡献较高不同渠道如何分布每日销售怎样变化以及这些汇总对应哪些明细。本次实验将“数据可视化”理解为用图表表达数据的方法“数据看板”则把指标、多个维度的图表和明细组织到一个业务页面。数据大屏强调展示载体和观看距离需要更大的字号与适配布局实时看板还需要动态数据源和刷新机制。本工程使用本地静态 CSV交互筛选会重新计算数据属于可交互的静态数据看板。四个必做模块的内容和图表选择如下。模块展示内容选择依据数据概览区销售总额、有效订单、平均客单价、销售额环比用数据卡片快速呈现核心数值维度统计区品类销售额对比、渠道销售额占比水平柱状图便于比较大小环形图展示少量渠道的结构趋势分析区每日销售变化、地区与星期分布折线图表达时间变化热力图比较两个分类维度明细数据区订单明细、商品排行、清洗计数便于追溯汇总结果和查看数据处理过程版面与配色左侧放日期、品类、地区和渠道筛选。主区域从上到下依次安排概览、维度、趋势和明细先看总体再比较结构和趋势最后查明细。桌面图表采用双栏手机改为单栏。主色选用蓝色#2563EB辅助色为绿色#0F9D8A和橙色#E59B38背景使用白色和浅灰色。数码、家居、文具以及三个渠道分别保持固定颜色减少在不同筛选范围间重新识别颜色的负担。草图先确定信息顺序、模块比例和筛选位置实际页面再根据图表、表格和手机宽度调整尺寸与间距。二、实验环境与工程结构实际验证环境为 Windows、Python 3.12.14、Streamlit 1.65.0、Pandas 3.0.6、Plotly 7.1.0 和 pytest 9.1.1。当前固定依赖需要 Python 3.11 或以上工程提供依赖锁定文件和 Windows 启动脚本。实验2_电商数据看板/ ├── app.py # Streamlit 页面入口 ├── dashboard/ │ ├── data.py # 清洗、筛选和指标计算 │ └── charts.py # 图表与报告导出 ├── generate_data.py # 模拟原始数据生成 ├── prepare_outputs.py # 清洗结果、统计值和报告生成 ├── data/ │ ├── sales_raw.csv │ └── sales_clean.csv ├── tests/ # 数据与页面测试 ├── evidence/ # 日志、实际截图与验证结果 ├── exports/ # 离线报告和实际下载结果 ├── 博客/ # 本文与图片 └── requirements-lock.txt把统计逻辑放在独立模块中可以直接测试清洗和汇总结果页面只负责接收筛选条件和展示。这也便于导出报告复用相同的数据口径。三、模拟数据准备与预处理数据字段与生成方式样例覆盖2026 年 7 月 1 日至 9 月 28 日每天生成 6 条正常订单共 540 条。商品包含数码、家居和文具三个品类地区包含华东、华南、华北和西部渠道包含线上商城、直播渠道和线下门店。随机种子固定为20261013便于复现实验结果。字段含义数据维度order_id订单编号标识维度date订单日期时间维度category、product品类与商品分类维度region、channel地区与渠道分类维度quantity、unit_price数量与单价数值维度生成器额外加入 19 条脏数据用来检验空值、无效日期、错误数字、异常范围、重复行和订单冲突的处理。所有数据均为课程模拟数据不代表真实商家的业务记录。清洗规则和结果八个字段均为必需字段。清洗按缺失、日期、数值、业务范围、重复和订单冲突的顺序进行每条删除记录只计入一个原因。处理项目删除记录数规则关键字段缺失4空值或纯空白字段删除日期格式无效2严格要求有效的YYYY-MM-DD日期数值格式无效2非数字、NaN、无穷值等删除数量或单价不合法4数量必须为正整数单价必须为正数超出业务范围2数量超过 100 或单价超过 20000 元删除重复记录3完全重复记录保留第一条订单编号冲突2同编号内容不一致时删除所有冲突行最终有效记录540559 − 19数量与价格上限属于本次模拟场景的业务假设实际业务需要重新确认。单价最多两位小数转换成整数分后再计算销售额df[sales_cents]df[quantity]*df[unit_price_cents]例如5 件单价 208.95 元的商品对应5 × 20895 104475分展示为 1044.75 元。汇总时仍然使用整数分最后转为元展示。清洗原表采用读取与复制处理结果单独保存到sales_clean.csv。模拟数据生成器默认保留已有原文件避免一次运行就覆盖原始数据。四、核心指标与基础图表实现数据卡片和指标口径概览区展示四个指标销售额为当前记录的金额合计订单数为当前有效记录数平均客单价为销售额除以订单数环比则与前一个等长日期区间比较。平均客单价 当前销售额 / 当前订单数 销售额环比 (当前销售额 − 对照期销售额) / 对照期销售额日期区间包含起止日。默认最近 30 天为8 月 30 日至 9 月 28 日对照期为7 月 31 日至 8 月 29 日两个区间使用相同的品类、地区和渠道条件。对照期销售额为 69,420.90 元因此本次环比为(68413.35 − 69420.90) / 69420.90 ≈ −1.45%如果前一个等长区间未完整落在数据覆盖期内或对照销售额为零页面显示“暂无可比数据”。这样不会把无法计算的增长率显示为零增长。柱状图、折线图与环形图柱状图按品类汇总金额以水平排列方便读分类名称。环形图按渠道汇总销售额显示各渠道占比鼠标悬浮时显示分类名称、准确金额和比例。tableaggregate(df,category)table[sales]table[sales_cents]/100figpx.bar(table,xsales,ycategory,orientationh,colorcategory,color_discrete_mapCOLORS,labels{sales:销售额 元,category:品类},text_auto,.2f)折线图按日期求和并补齐当前日期区间。覆盖期内没有订单的日期显示为零保证时间轴连续。热力图按地区和星期累计金额颜色越深表示销售额越高。基础图表、数据卡片和表格在同一页中整合通过统一的金额单位、配色、边框和间距保持视觉一致。明细区域还能切换到商品排行或清洗记录。五、筛选、图表联动与报告导出所有模块使用同一个筛选结果筛选条件集中到Filters中页面先得到当前明细再让指标、图表和导出复用它。viewapply_filters(cleaned,filters)metricsindicators(cleaned,filters)apply_filters()同时检查日期、品类、地区和渠道。指标中的对照期也使用相同的分类条件避免当前值与不同口径的历史值进行比较。点击品类柱形时通过 Streamlit 的 Plotly 选择回调读取选中的分类更新侧栏状态再重新渲染页面。事件接口可参考 Streamlit 图表选择官方文档。defon_category_select():eventst.session_state.get(category_chart,{})pointsevent.get(selection,{}).get(points,[])ifpoints:valuepoints[0].get(y)ifvalueincategories:st.session_state[category]value实际浏览器操作中筛选“家居”后页面显示销售额 18,090.45 元、54 笔订单重置后点击“数码”柱形页面联动为销售额 42,397.25 元、64 笔订单平均客单价 662.46 元。其余图表和明细随之更新。导出当前数据和离线分析报告CSV 导出当前筛选后的明细带中文列名和 UTF-8 BOM便于打开。文本字段对常见表格公式前缀作转义HTML 表格中的文字则进行转义。HTML 报告包含日期范围、分类条件、四个指标、四张交互图表、数据观察和完整明细。第一张图嵌入 Plotly JavaScript其余图复用该脚本。此方式可实现离线阅读相关选项见 Plotly HTML 导出官方说明。fig.to_html(full_htmlFalse,include_plotlyjsindex0,config{displayModeBar:False,responsive:True})实际下载“数码”范围 CSV 后文件包含 64 条订单下载的 HTML 报告在阻断外网请求时仍能显示四张图表金额与页面一致。六、实验结果验证验证既检查数据也检查用户实际操作的页面。验证范围结果数据清洗559 条原始记录变为 540 条各删除原因合计为 19独立金额用例4 笔已知订单合计 130.00 元分类、渠道、日期和热力图合计一致默认看板68,413.35 元180 笔订单客单价 380.07 元环比 −1.45%全部日期209,023.20 元540 笔订单环比显示暂无可比数据下拉筛选家居范围为 18,090.45 元和 54 笔订单图表点击联动数码范围为 42,397.25 元和 64 笔订单文件下载实际 CSV 为 64 笔订单HTML 离线显示四张图表手机布局390 像素视口下无页面整体横向溢出指标和图表改为单栏最终 pytest 输出为30 passed in 3.81s测试覆盖清洗与删除计数、原始文件保护、无效输入、重复与冲突订单、日期边界、空结果、对比期缺失、增长率计算、图表合计、渠道颜色稳定性和 HTML 转义并使用 Streamlit AppTest 检查页面初始状态、分类筛选与重置。该测试工具的使用方式可查阅 Streamlit AppTest 官方文档。桌面截图展示不同模块手机截图检查单栏阅读。完整测试日志、浏览器检查结果和原文件指纹保存在工程的evidence目录中。七、遇到的问题与处理极大金额字符串会触发 Decimal 溢出测试输入1e1000000时初版通过abs(x)判断金额上限触发了 Decimal 的上下文溢出。首轮实际结果为 28 项通过、1 项失败。修复改用copy_abs()取得绝对值再检查业务上限过大金额被计入“超出业务范围”。copy_abs()不受上下文影响也不会进行舍入其行为可参考 Python Decimal 官方文档。真实修复如下。- if abs(x) Decimal(20000): if x.copy_abs() Decimal(20000):修复前日志、实际 diff 和最终测试日志均保留在工程中。环比缺少完整对照期当选择全部 90 天数据时前一个 90 天区间没有落在当前数据覆盖期内。实现中先判断对比区间是否完整缺失时返回空值并显示“暂无可比数据”。同时对照销售额为零也不直接进行除法。页面宽度和运行环境手机宽度下将指标卡片和双栏图表改为单栏长表格保持容器内滚动。桌面保留双栏使分类和趋势能够并排比较。Windows 批处理文件采用 CRLF 换行依赖版本保存在锁定文件中便于复现运行环境。筛选后渠道颜色改变视觉检查发现环形图按金额排序后默认颜色顺序会使同一渠道在不同筛选范围下变色。修复为直播渠道固定蓝色、线上商城固定绿色、线下门店固定橙色并追加回归测试检查筛选前后的渠道颜色一致。金额排名仍可变化颜色所代表的渠道保持稳定。八、数据观察与实验总结在完整模拟数据中数码品类销售额为 124,020.00 元家居为 58,878.50 元文具为 26,124.70 元总额为 209,023.20 元。默认最近 30 天的数码销售额为 42,397.25 元占该时段销售额约 61.97%。看板能够把这种品类结构与趋势、渠道和明细放在一起查看。最近 30 天相较前一个等长时段下降 1.45%这是当前模拟数据的统计结果。仅凭这些数值不能推断真实经营原因实际分析还需要结合客流、价格、促销和成本等信息。本次实现完成了必做的需求分析与草图、CSV 预处理、三种基础图表与数据卡片、四模块整合以及截图验证和博客报告。选做部分包括 hover 提示、联动筛选、热力图、商品排行、多终端适配和报告导出。实时接口接入、自动轮播和预警功能可作为后续扩展方向。AI 在本次流程中辅助完成方案、编码、测试分析和博客整理自查与自动化验证的证据已保留。个人提交前可结合课程要求补充对异常值上限、环比口径和图表选择的实际复核。这次实验的关键体会是图表只是呈现方式清晰的数据口径、统一的筛选结果和可验证的汇总才决定看板是否可信。九、运行与获取完整工程下载实验2完整工程工程包已上传至 CSDN当前正在审核审核通过后即可下载。解压后双击启动看板.cmd首次联网安装依赖后打开http://127.0.0.1:8501。也可以在工程目录运行python-m venv.venv.venv\Scripts\python-m pip install-r requirements-lock.txt.venv\Scripts\python-m streamlit run app.py复现数据处理与测试.venv\Scripts\python generate_data.py.venv\Scripts\python prepare_outputs.py.venv\Scripts\python-m pytest-q附件包含完整源码、原始与清洗 CSV、依赖、实际截图、测试日志、离线报告和运行说明。

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑