Streamlit + Plotly 从零搭建电商销售数据看板（附完整源码）-北京尧图网络

前言在数据驱动的时代数据看板Dashboard已成为企业监控运营、分析业务的核心工具。本文带你用 Python 最快的方式——Streamlit Pandas Plotly从零搭建一个电商销售数据看板包含数据卡片、柱状图、饼图、折线图、明细表、筛选联动、预警提示等完整功能。技术栈Python 3.13StreamlitWeb 框架Pandas数据处理Plotly可视化PyCharm Community Edition最终效果一个可在浏览器访问、支持筛选联动、带动画交互的实时数据看板。一、环境准备bash复制下载pip install streamlit pandas plotly openpyxl numpy 国内网络建议加镜像pip install ... -i https://pypi.tuna.tsinghua.edu.cn/simple项目结构text复制下载PythonProject/ ├── data/ │ └── sales_data.csv ├── app.py ├── generate_data.py └── requirements.txt二、数据生成与预处理使用 NumPy 模拟生成 500 条电商订单数据包含订单号、日期、品类、单价、数量、金额等字段。python复制下载import pandas as pd import numpy as np from datetime import datetime, timedelta np.random.seed(42) categories [电子产品, 服装, 食品, 家居, 图书] records [] start_date datetime(2024, 1, 1) for i in range(500): date start_date timedelta(daysnp.random.randint(0, 365)) cat np.random.choice(categories) price round(np.random.uniform(20, 2000), 2) qty np.random.randint(1, 20) records.append({ order_id: fORD{i1:04d}, date: date.strftime(%Y-%m-%d), category: cat, price: price, quantity: qty, amount: round(price * qty, 2) }) df pd.DataFrame(records) # 预处理 df.dropna(inplaceTrue) df df[df[amount] 0] df[month] pd.to_datetime(df[date]).dt.strftime(%Y-%m) df.to_csv(data/sales_data.csv, indexFalse, encodingutf-8-sig) print(f✅ 数据生成完成共 {len(df)} 条记录)关键点问题原因解决Streamlit 首次运行卡在 Email误以为是输入网址直接回车跳过CSV 中文乱码Windows 默认 GBK保存时用utf-8-sig月度排序错乱字符串排序用datetime类型修改代码不生效未刷新按R或点击 Rerun端口被占用8501 已用--server.port 8502八、总结与展望通过本项目用不到150 行代码就完成了一个功能完整的数据看板涵盖了数据可视化的大部分核心要素。Streamlit 极大降低了 Web 看板的开发门槛配合 Plotly 的交互能力非常适合做数据分析原型、课程作业、甚至小型业务监控系统。未来可以扩展六、进阶功能1. 筛选联动侧边栏多选品类全部图表自动同步更新——只需一行df df[df[category].isin(selected_cats)]。2. 数据预警python复制下载if growth 0: st.error(f⚠️ 环比增长率为负{growth:.2f}%)3. 数值滚动动画Streamlit 的st.metric自带数值变化动画无需额外配置。4. 图表悬浮提示Plotly 图表默认支持 hover 悬浮提示鼠标移到柱状图/折线图上即显示具体数值。七、踩坑记录utf-8-sig编码避免中文乱码剔除空值和金额≤0 的异常数据派生month字段便于月度聚合三、看板主程序将以下代码保存为app.pypython复制下载import streamlit as st import pandas as pd import plotly.express as px # 页面配置 st.set_page_config( page_title电商销售数据看板, page_icon, layoutwide ) # 自定义样式 st.markdown( style .main { background-color: #f5f7fa; } h1 { color: #1f77b4; text-align: center; } /style , unsafe_allow_htmlTrue) # 加载数据带缓存 st.cache_data def load_data(): df pd.read_csv(data/sales_data.csv) df[date] pd.to_datetime(df[date]) return df df load_data() # 侧边栏筛选 st.sidebar.header( 筛选条件) selected_cats st.sidebar.multiselect( 选择品类, optionsdf[category].unique(), defaultdf[category].unique() ) df df[df[category].isin(selected_cats)] # 标题 st.markdown(h1 电商销售数据看板/h1, unsafe_allow_htmlTrue) st.markdown(---) # 数据概览区 total_amount df[amount].sum() total_orders len(df) avg_price df[amount].mean() monthly df.groupby(month)[amount].sum().sort_index() growth 0 if len(monthly) 2: growth (monthly.iloc[-1] - monthly.iloc[-2]) / monthly.iloc[-2] * 100 col1, col2, col3, col4 st.columns(4) col1.metric( 总销售额, f¥{total_amount:,.0f}) col2.metric( 总订单数, f{total_orders:,}) col3.metric( 平均单价, f¥{avg_price:,.2f}) col4.metric( 环比增长率, f{growth:.2f}%) if growth 0: st.error(f⚠️ 警告环比增长率下降 {growth:.2f}%) else: st.success(f✅ 环比增长率 {growth:.2f}%表现良好) st.markdown(---) # 维度统计占比结构 col_left, col_right st.columns(2) with col_left: st.subheader( 各品类销售额对比) cat_data df.groupby(category)[amount].sum().reset_index() fig_bar px.bar( cat_data, xcategory, yamount, colorcategory, color_discrete_sequencepx.colors.qualitative.Set2, labels{category: 品类, amount: 销售额(元)} ) fig_bar.update_layout(showlegendFalse, height380) st.plotly_chart(fig_bar, use_container_widthTrue) with col_right: st.subheader( 各品类销售占比) fig_pie px.pie( cat_data, namescategory, valuesamount, hole0.4, color_discrete_sequencepx.colors.qualitative.Set3 ) fig_pie.update_layout(height380) st.plotly_chart(fig_pie, use_container_widthTrue) st.markdown(---) # 趋势分析区 st.subheader( 月度销售趋势) monthly_df df.groupby(month)[amount].sum().reset_index() fig_line px.line( monthly_df, xmonth, yamount, markersTrue, labels{month: 月份, amount: 销售额(元)} ) fig_line.update_traces(line_color#1f77b4, line_width3) fig_line.update_layout(height350) st.plotly_chart(fig_line, use_container_widthTrue) st.markdown(---) # 明细数据区 st.subheader( 订单明细数据) st.dataframe( df[[order_id, date, category, price, quantity, amount]] .sort_values(date, ascendingFalse) .head(50), use_container_widthTrue, height300 )四、启动看板bash复制下载streamlit run app.py浏览器自动打开http://localhost:8501即可看到完整看板。⚠️ 首次运行会提示输入邮箱直接按回车跳过即可。五、效果展示看板包含✅ 一行 4 个数据卡片总销售额、订单数、平均单价、环比增长率✅ 红/绿预警提示条✅ 左侧柱状图品类对比右侧环形图品类占比✅ 中部月度折线图✅ 底部订单明细表Top50✅ 左侧筛选器联动所有图表对接 MySQL / API 实现实时刷新加入地图、热力图、雷达图等高级图表支持暗色主题切换移动端自适应一键导出 PDF 报告

Streamlit + Plotly 从零搭建电商销售数据看板（附完整源码）

相关推荐

智能文档抽取系统通过“视觉感知底座+大模型认知引擎”双轮驱动，将合同、票据等非结构化文档自动转化为可直接使用的结构化数据

Python循环全攻略：for/while、迭代器与避坑技巧

企业级大模型私有化部署实战：基于vLLM的推理引擎调优指南

更多资讯

AnyPS5项目实战：HID协议转换实现主机外设自由

柔性温度传感器方框型结构设计：从原理到工艺全解析

昇腾910A+CANN 8.5.0在ARM服务器上的安装排障实战

Zynq异构实时方案：Linux UIO用户态驱动与FPGA中断优化实践

电网不平衡下三电平并网逆变器控制建模与Simulink仿真分析

自适应领导者樽海鞘群算法：解决多峰函数全局搜索早熟问题

今日更新

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？