实验2 数据看板的设计与实现 实验报告技术栈Streamlit Pandas Plotly 业务场景电商销售数据看板一、实验目的与环境1. 掌握数据看板的基本概念、设计原则与布局规范理解数据可视化图表的选型依据。2. 学会使用 Streamlit 快速搭建交互式 Web 看板结合 Pandas 完成数据处理、Plotly 完成图表绘制。3. 掌握从需求分析、数据准备、可视化设计到看板整合的完整流程实现静态展示与动态筛选联动。实验环境Windows/Linux 系统、Chrome 浏览器、Python 3.x、VS Code依赖库 streamlit、pandas、plotly、openpyxl。二、需求分析与版面设计基础任务1本次实验自选业务场景为「电商销售数据看板」面向运营人员用于监控整体销售业绩、对比商品类别与渠道结构、观察月度销售趋势并辅助定位高贡献地区与品类。依据信息层级将看板自上而下划分为四大模块① 数据概览区顶部一行 4 个 KPI 指标卡总销售额、总订单数、平均客单价、月环比增长率让用户一眼掌握全局② 维度统计区类别柱状图、渠道环形图做横向对比与结构占比③ 趋势分析区月度销售额折线图、地区横向条形图观察时间趋势与地域差异④ 明细数据区可折叠的订单明细表支持下钻查看原始记录。配色方案主色采用稳重的商务蓝 #1f77b4辅助色使用橙、绿、红、紫、青 5 色区分多类别背景为浅灰白 #f8fafc保证长时间阅读不刺眼。三、数据准备与预处理基础任务2使用 Python 脚本 generate_data.py 模拟生成 8000 条订单数据字段包含order_id、date日期 2024-01-01 ~ 2025-09-30、category家电/服饰/食品/数码/美妆/家居、region华东/华南/华北/华中/西南/东北/西北、channel天猫/京东/拼多多/抖音电商/线下门店、quantity、amount、profit。数据中人为注入 2% 空值、3% 异常金额、少量重复订单用于演示清洗流程。预处理步骤① drop_duplicates() 去重② dropna() 删除 category/amount 关键字段空值③ 过滤 amount 在 (0, 50000] 区间剔除异常大额④ 转换 date 为 datetime 并排序⑤ 导出为 UTF-8 BOM 编码的 sales_data.csv共保留 7849 条干净记录。四、基础可视化图表与静态看板整合基础任务3、4使用 Plotly Express 实现以下 4 类基础图表全部通过 st.plotly_chart 嵌入页面• 数据卡片st.metric 展示 4 个核心 KPI带环比涨跌箭头• 柱状图px.bar 展示各类别销售额对比按数值降序• 折线图px.line 按月份聚合销售额带数据点标记观察 618、双11 大促峰值• 环形图px.pie(hole0.4) 展示各渠道销售额占比页面布局通过 st.set_page_config(layoutwide) 开启宽屏自适应用 st.columns 将多个图表并排排列统一标题、间距与配色实现整洁、层级清晰的静态看板。五、进阶功能实现5.1 动态视觉效果进阶1• Plotly 图表自带 hover 悬浮提示鼠标悬停可查看精确数值• 通过 st.markdown 注入 CSS keyframes fadeIn实现页面模块渐入动画• KPI 卡片使用渐变背景与圆角边框仪表盘使用 Plotly Indicator 的 gaugenumberdelta 模式数值带动画过渡• 使用 layoutwide st.columns 自适应屏幕宽度避免错位溢出。5.2 图表联动与筛选进阶2在侧边栏放置 4 个筛选控件日期范围st.date_input、商品类别st.multiselect、销售地区st.multiselect、销售渠道st.multiselect。所有筛选条件以 Pandas 布尔索引叠加到同一份 DataFrame 上后续全部图表与 KPI 均基于过滤后的 df 绘制因此任一筛选条件变化时整页图表同步刷新实现真正的图表联动。# 核心筛选逻辑mask (df.dated0)(df.dated1) \df.category.isin(cats) \df.region.isin(regs) \df.channel.isin(chns)df raw_df[mask]5.3 多维度可视化进阶3在基础图表之外新增 4 类高级组件• 排行榜地区销售额 TOP5 横向条形图按颜色深浅映射数值• 热力图px.imshow 绘制「月份 × 类别」销售额矩阵深色代表高销月份• 雷达图go.Scatterpolar 从销售额、订单数、利润、客单价、销量 5 个维度归一化对比各类别综合能力• 仪表盘go.Indicator gauge 展示最近一个完整月对 500 万月度目标的完成率带阈值色带与红线标记。六、运行截图与结果图1 看板顶部标题、KPI 指标卡、侧边栏筛选器图2 维度统计类别柱状图渠道环形图与月度趋势折线图图3 地区销售额对比 与 地区 TOP5 排行榜图4 月份 × 类别 销售额热力图图5 各类别综合能力雷达图 与 月度目标完成率仪表盘图6 明细数据区可展开订单表七、遇到的问题及解决方法1. 问题pip 直接安装 streamlit 时因用户目录权限报错。解决在工程目录下 python -m venv .venv 创建虚拟环境后再安装依赖隔离系统环境。2. 问题numpy.datetime64 没有 .month 属性导致数据生成脚本报错。解决用 pd.Timestamp(np.random.choice(dates)) 包装后再取月份。3. 问题np.random.normal 误把字典 price_mean/price_std 当关键字参数传入。解决显式写成 normal(loc..., scale...)。4. 问题Streamlit 首次打开页面长时间显示骨架屏。解决等待 Plotly 图表 JS 渲染完成后再截图避免抓到 loading 状态。八、实验总结通过本次实验完整走通了「业务场景分析 → 模拟数据生成与清洗 → 图表选型 → Streamlit 页面布局 → 筛选联动 → 高级可视化」的全流程。基础任务掌握了 KPI 卡、柱状图、折线图、饼图的使用进阶任务理解了基于同一份过滤后 DataFrame 实现图表联动的核心思想并接触了排行榜、热力图、雷达图、仪表盘这 4 类常见 BI 组件。不足与改进方向当前数据为静态 CSV下一步可按扩展任务接入实时数据源、增加阈值预警与大屏适配进一步贴近真实业务监控场景。点我下载本实验的相关代码