企业官网建设流程全解析

基础实验任务

一、实验名称

数据看板的设计与实现

二、实验学时

2~4学时

三、实验目的

1. 掌握数据看板的基本概念、核心功能与应用场景，理解数据可视化、数据大屏、实时看板的区别与联系。

2. 熟悉数据看板的设计原则与布局规范，包括视觉层级、色彩搭配、图表选型、信息降噪、适配布局等核心设计逻辑。

3. 学会根据业务数据特征选择适配的可视化图表（柱状图、折线图、饼图、仪表盘、地图、数据卡片等），实现数据的直观展示与维度分析。

4. 培养数据思维与可视化设计能力，能够独立完成从需求分析、版面设计、数据处理到看板落地的完整流程。

5. 理解静态看板与动态实时看板的差异，掌握数据刷新、动态轮播、联动交互等基础功能的实现原理。

四、实验环境

• 硬件：计算机、网络环境

• 软件：浏览器、VS Code / PyCharm、Streamlit + Pandas + Plotly

五、基础实验任务

任务1：看板需求分析与版面设计

业务场景：电商销售数据看板

核心展示需求：

• 展示总销售额、平均销售额、总销售数量等核心指标

• 按商品类别、销售区域进行维度统计

• 展示每日销售额变化趋势

• 提供明细数据表格查看

版面布局规划：

配色方案：

• 主色：#3498db（蓝色）

• 辅助色：#2ecc71（绿色）、#e74c3c（红色）

• 背景色：#f5f7fa（浅灰白）

任务2：实验数据准备与预处理

数据来源：使用 Python 模拟生成电商销售数据（generate_data.py）

数据字段：

数据预处理：

• 剔除销售额 ≤ 0 的异常数据

• 保存为sales_data.csv，编码格式utf-8-sig（防止中文乱码）

数据规模：共约3000+ 条记录

任务3：基础可视化图表搭建

使用Streamlit + Plotly完成以下图表：

1. 数据卡片（核心指标）

• 总销售额：¥X,XXX,XXX

• 平均销售额：¥X,XXX

• 总销售数量：X,XXX

2. 柱状图（分类对比）

• 展示各商品类别的销售额对比

3. 饼图（占比结构）

• 展示各销售区域的销售额占比

4. 折线图（时间趋势）

• 展示每日销售额变化趋势

任务4：静态数据看板整合实现

将以上所有组件整合到同一页面，使用 Streamlit 的st.columns()实现分栏布局，整体结构如下：

# 页面配置 st.set_page_config(page_title="电商销售数据看板", layout="wide") # 数据概览区 col1, col2, col3 = st.columns(3) col1.metric("总销售额", ...) col2.metric("平均销售额", ...) col3.metric("总销售数量", ...) # 维度统计区 col4, col5 = st.columns(2) # 柱状图 + 饼图 # 趋势分析区 # 折线图 # 明细数据区 st.dataframe(df.head(100))

样式优化：

• 使用自定义 CSS 调整背景色和字体颜色

• 统一图表高度为 400px

• 使用use_container_width=True实现自适应宽度

任务5：实验结果验证与总结

看板成品截图：

数据准确性验证：

• 总销售额与sales_data.csv中df['销售额'].sum()结果一致

• 各图表数据与原始数据分组统计结果一致

六、完整源码

app.py（看板主程序）

import streamlit as st import pandas as pd import plotly.express as px # ================== 页面配置 ================== st.set_page_config( page_title="电商销售数据看板", page_icon="📊", layout="wide" ) # 自定义 CSS：调整背景色和字体 st.markdown(""" <style> .main { background-color: #f5f7fa; } .block-container { padding-top: 1rem; padding-bottom: 1rem; } h1, h2, h3 { color: #2c3e50; } </style> """, unsafe_allow_html=True) # ================== 读取数据 ================== @st.cache_data def load_data(): df = pd.read_csv('sales_data.csv', parse_dates=['日期']) return df df = load_data() # ================== 标题 ================== st.title("📊 电商销售数据看板") st.markdown("---") # ================== 数据概览区（数据卡片） ================== st.subheader("一、数据概览") total_sales = df['销售额'].sum() avg_sales = df['销售额'].mean() total_quantity = df['销售数量'].sum() col1, col2, col3 = st.columns(3) col1.metric("总销售额", f"¥{total_sales:,.0f}") col2.metric("平均销售额", f"¥{avg_sales:,.0f}") col3.metric("总销售数量", f"{total_quantity:,}") st.markdown("---") # ================== 维度统计区（柱状图 + 饼图） ================== st.subheader("二、维度统计") col4, col5 = st.columns(2) # 柱状图：各商品类别销售额 with col4: category_sales = df.groupby('商品类别')['销售额'].sum().reset_index() fig_bar = px.bar( category_sales, x='商品类别', y='销售额', title='各商品类别销售额对比', color='商品类别', color_discrete_sequence=px.colors.qualitative.Set2 ) fig_bar.update_layout(showlegend=False, height=400) st.plotly_chart(fig_bar, use_container_width=True) # 饼图：各销售区域占比 with col5: region_sales = df.groupby('销售区域')['销售额'].sum().reset_index() fig_pie = px.pie( region_sales, names='销售区域', values='销售额', title='各销售区域销售额占比', color_discrete_sequence=px.colors.qualitative.Pastel ) fig_pie.update_layout(height=400) st.plotly_chart(fig_pie, use_container_width=True) st.markdown("---") # ================== 趋势分析区（折线图） ================== st.subheader("三、趋势分析") daily_sales = df.groupby('日期')['销售额'].sum().reset_index() fig_line = px.line( daily_sales, x='日期', y='销售额', title='每日销售额变化趋势', markers=True ) fig_line.update_traces(line_color='#3498db') fig_line.update_layout(height=400) st.plotly_chart(fig_line, use_container_width=True) st.markdown("---") # ================== 明细数据区（数据表格） ================== st.subheader("四、明细数据") st.dataframe(df.head(100), use_container_width=True) st.caption("数据来源：模拟电商销售数据 | 实验2 数据看板设计与实现")

generate_data.py（数据生成）

import pandas as pd import numpy as np from datetime import datetime, timedelta # 生成模拟电商销售数据 np.random.seed(42) dates = pd.date_range(start='2024-01-01', end='2024-12-31', freq='D') categories = ['电子产品', '服装', '食品', '家居', '图书'] regions = ['华东', '华北', '华南', '西南', '东北'] data = [] for date in dates: for _ in range(np.random.randint(5, 15)): # 每天随机生成若干条订单 category = np.random.choice(categories) region = np.random.choice(regions) sales = np.random.randint(100, 5000) quantity = np.random.randint(1, 10) data.append({ '日期': date, '商品类别': category, '销售区域': region, '销售额': sales, '销售数量': quantity }) df = pd.DataFrame(data) # 简单清洗：去掉负数（模拟异常值） df = df[df['销售额'] > 0] # 保存为 CSV df.to_csv('sales_data.csv', index=False, encoding='utf-8-sig') print("数据已生成，共", len(df), "条记录") print(df.head())