实验2数据看板的设计与实现Streamlit电商销售看板实验概述本次实验学习数据看板的设计与落地实现理解静态看板、交互看板的区别掌握看板布局设计、数据预处理、图表选型、页面整合整套流程。 选用电商销售数据作为业务案例构建交互式可视化看板实现指标卡片、柱状图、饼图、折线图侧边栏多条件筛选筛选后全部图表与统计指标同步更新。实验目的掌握数据看板基本概念、核心功能与应用场景区分数据可视化、数据大屏、实时看板理解看板在业务分析中的价值。熟悉看板设计原则、页面布局、色彩搭配、图表选型能够根据业务需求划分页面功能模块。根据业务数据特征选择合适图表指标卡片、柱状图、折线图、饼图完成多维度数据展示。完整走完需求分析 → 版面设计 → 数据准备预处理 → 可视化开发 → 结果验证完整流程建立数据思维。理解静态看板和动态交互看板差异掌握筛选驱动图表刷新的实现原理。实验环境硬件个人计算机可访问网络软件VS Code、Chrome浏览器Python第三方库streamlit1.10.0、pandas、plotly、numpy、openpyxl依赖安装命令pip install streamlit1.10.0 pandas plotly numpy openpyxl基础实验任务实现任务1看板需求分析与版面设计业务场景电商运营销售监控看板面向运营人员用来观察整体销售大盘分析不同商品类别销售业绩查看时间维度销售走势。核心业务需求展示大盘核心指标总销售额、有效订单数量、平均客单价、商品总销量分类维度不同商品类别的销售额对比、占比分析时间维度月度销售额变化趋势展示清洗后的原始销售明细数据实现侧边栏筛选支持按商品类别、订单时间筛选数据页面模块划分模块区域功能描述数据概览区页面顶部指标卡片展示4个核心大盘数字维度统计区商品类别柱状对比图、类别销售额占比饼图趋势分析区月度销售折线趋势图明细数据区业务明细表格配色方案主色调蓝色 #1f77b4辅助色橙色、绿色页面背景浅灰色简约商务风格任务2实验数据准备与预处理数据集文件sales_data.csv字段订单ID,订单日期,商品类别,单价,销量,销售额。sales_data.csv完整内容新建文件另存为sales_data.csv编码UTF‑8订单ID,订单日期,商品类别,单价,销量,销售额 O001,2025-01-12,食品生鲜,128.5,12,1542.0 O002,2025-01-15,数码产品,2699.0,2,5398.0 O003,2025-01-20,服饰鞋包,359.0,8,2872.0 O004,2025-02-05,家居日用,199.0,15,2985.0 O005,2025-02-18,美妆护肤,245.0,10,2450.0 O006,2025-03-03,食品生鲜,142.0,18,2556.0 O007,2025-03-11,数码产品,3299.0,3,9897.0 O008,2025-03-22,服饰鞋包,429.0,6,2574.0 O009,2025-04-08,家居日用,235.0,11,2585.0 O010,2025-04-16,美妆护肤,298.0,9,2682.0 O011,2025-05-02,食品生鲜,135.0,14,1890.0 O012,2025-05-19,数码产品,2899.0,2,5798.0 O013,2025-06-07,服饰鞋包,389.0,7,2723.0 O014,2025-06-21,家居日用,179.0,16,2864.0 O015,2025-07-09,美妆护肤,268.0,12,3216.0 O016,2025-07-22,食品生鲜,156.0,13,2028.0 O017,2025-08-05,数码产品,3599.0,2,7198.0 O018,2025-08-17,服饰鞋包,459.0,5,2295.0 O019,2025-09-03,家居日用,215.0,13,2795.0 O020,2025-09-14,美妆护肤,325.0,8,2600.0数据预处理逻辑将订单日期解析为datetime时间类型提取年月字段用于月度趋势统计任务3基础可视化图表搭建需要实现的可视化组件指标卡片总销售额、有效订单数、平均客单价、商品总销量柱状图各商品类别销售总额对比饼图各个类别销售额占比折线图月度销售额变化趋势明细表格展示业务数据任务4静态看板整合实现app.py 完整源码兼容streamlit 1.10.0低版本import streamlit as st import pandas as pd import plotly.express as px # 加载数据 st.cache(allow_output_mutationTrue) def load_data(): df pd.read_csv(sales_data.csv) df[订单日期] pd.to_datetime(df[订单日期]) df[年月] df[订单日期].dt.strftime(%Y-%m) return df df load_data() # 页面标题 st.title(电商十日销售数据看板) # st.markdown替代st.divider实现分割线 st.markdown(---) # 侧边栏筛选 with st.sidebar: st.header(数据筛选) category_list df[商品类别].unique() select_categories st.multiselect(选择商品类别, category_list, defaultcategory_list) min_date df[订单日期].min() max_date df[订单日期].max() start_date, end_date st.date_input(选择订单时间区间, value[min_date, max_date]) # 筛选数据 filtered_df df[ (df[商品类别].isin(select_categories)) (df[订单日期] pd.to_datetime(start_date)) (df[订单日期] pd.to_datetime(end_date)) ] # 核心业务概览 st.subheader( 核心业务概览) total_sales filtered_df[销售额].sum() total_orders filtered_df[订单ID].nunique() avg_price filtered_df[单价].mean() total_quantity filtered_df[销量].sum() col1, col2, col3, col4 st.columns(4) with col1: st.metric(总销售额(元), f{total_sales:,.2f}) with col2: st.metric(有效订单数, f{total_orders}) with col3: st.metric(平均客单价(元), f{avg_price:,.2f}) with col4: st.metric(商品总销量, f{total_quantity}) st.markdown(---) # 类别销售额柱状图 饼图 col_left, col_right st.columns(2) category_sales filtered_df.groupby(商品类别)[销售额].sum().reset_index() with col_left: fig_bar px.bar(category_sales, x商品类别, y销售额, title各类别销售额) st.plotly_chart(fig_bar) with col_right: fig_pie px.pie(category_sales, values销售额, names商品类别, title类别销售额占比) st.plotly_chart(fig_pie) st.markdown(---) # 月度销售趋势折线图 month_sales filtered_df.groupby(年月)[销售额].sum().reset_index() fig_line px.line(month_sales, x年月, y销售额, title月度销售额趋势) st.plotly_chart(fig_line) st.markdown(---) # 销售明细数据表 st.subheader( 销售明细数据表) st.dataframe(filtered_df)运行启动命令streamlit run app.py执行后浏览器访问[http://127.0.0.1:8501](http://127.0.0.1:8501)打开看板页面。任务5实验结果验证数据准确性校验抽样核对明细表格与图表统计结果确认聚合计算无误。页面效果页面层级清晰组件布局合理。交互验证修改侧边栏筛选条件指标卡片、全部图表、明细表格同步更新。图1电商销售数据看板完整运行截图✨进阶任务完成情况完成进阶2图表筛选交互功能在侧边栏实现商品类别多选筛选、订单时间区间筛选。修改筛选条件后核心指标卡片、柱状图、饼图、折线图、明细表格全部同步更新。Plotly图表自带hover悬浮提示鼠标悬浮查看具体数值。实验遇到问题与解决方案streamlit版本过低st.cache_data不存在解决替换为老版本装饰器st.cache(allow_output_mutationTrue)。st.divider()函数不存在解决全部替换为st.markdown(---)实现水平分割线。use_container_widthTrue参数不识别解决删除该参数去掉自适应容器配置。Python版本3.6新版Streamlit无法安装解决指定安装历史版本streamlit1.10.0。实验总结通过本次实验完整体验了数据看板从需求分析到代码落地的完整流程。Streamlit降低数据可视化开发门槛专注数据处理逻辑不需要编写前端页面代码快速完成交互式看板。不同图表有各自适用场景指标卡片展示大盘核心数字柱状图适合分类对比折线图观察时间趋势饼图展示占比结构。版本兼容问题需要注意高版本API在旧环境会报错需要做降级改写。增加筛选交互可以极大提升看板实用性筛选条件驱动全部视图刷新实现多维度自由分析。