Streamlit入门：10分钟搭建数据可视化界面

一、Streamlit简介

Streamlit是一个用Python构建数据应用的开源框架，它能让我们快速创建漂亮的数据可视化界面。本文将通过一个简单的示例，展示如何使用Streamlit构建数据可视化应用。

二、环境准备

2.1 安装依赖

pip install streamlit pandas plotly numpy

2.2 创建项目

mkdir streamlit_demo
cd streamlit_demo
touch demo_app.py

三、代码实现

3.1 完整代码

import streamlit as st
import pandas as pd
import plotly.express as px
import numpy as np

# 页面配置
st.set_page_config(
    page_title="Streamlit Demo",
    page_icon="📊",
    layout="wide"
)

# 标题
st.title("📊 Streamlit数据可视化示例")
st.markdown("---")

# 侧边栏
with st.sidebar:
    st.header("🔧 配置面板")
    
    # 数据生成配置
    num_points = st.slider("数据点数量", 10, 100, 50)
    chart_type = st.selectbox(
        "图表类型",
        ["折线图", "柱状图", "散点图", "饼图"]
    )

# 生成示例数据
df = pd.DataFrame({
    '日期': pd.date_range('2024-01-01', periods=num_points),
    '数值': np.random.randn(num_points).cumsum(),
    '类别': np.random.choice(['A', 'B', 'C'], num_points)
})

# 主要内容区
col1, col2 = st.columns(2)

with col1:
    st.subheader("📈 数据预览")
    st.dataframe(df, use_container_width=True)

with col2:
    st.subheader("📊 可视化展示")
    
    if chart_type == "折线图":
        fig = px.line(df, x='日期', y='数值', color='类别')
    elif chart_type == "柱状图":
        fig = px.bar(df, x='日期', y='数值', color='类别')
    elif chart_type == "散点图":
        fig = px.scatter(df, x='日期', y='数值', color='类别')
    else:  # 饼图
        fig = px.pie(df, values='数值', names='类别')
    
    st.plotly_chart(fig, use_container_width=True)

# 统计信息
st.markdown("---")
st.subheader("📊 统计信息")
col1, col2, col3 = st.columns(3)

with col1:
    st.metric("数据点数量", num_points)
with col2:
    st.metric("平均值", f"{df['数值'].mean():.2f}")
with col3:
    st.metric("标准差", f"{df['数值'].std():.2f}")

# 交互式数据筛选
st.markdown("---")
st.subheader("🔍 数据筛选")
selected_categories = st.multiselect(
    "选择类别",
    df['类别'].unique(),
    default=df['类别'].unique()
)

filtered_df = df[df['类别'].isin(selected_categories)]
st.dataframe(filtered_df, use_container_width=True)

# 下载按钮
st.markdown("---")
st.download_button(
    "📥 下载数据",
    filtered_df.to_csv(index=False).encode('utf-8'),
    "data.csv",
    "text/csv",
    key='download-csv'
)

3.2 代码说明

1. 页面配置

st.set_page_config(
    page_title="Streamlit Demo",
    page_icon="📊",
    layout="wide"
)

设置页面标题、图标和布局方式。

2. 侧边栏配置

with st.sidebar:
    st.header("🔧 配置面板")
    num_points = st.slider("数据点数量", 10, 100, 50)
    chart_type = st.selectbox(
        "图表类型",
        ["折线图", "柱状图", "散点图", "饼图"]
    )

创建侧边栏控制面板，包含数据点数量滑块和图表类型选择器。

3. 数据展示

col1, col2 = st.columns(2)
with col1:
    st.dataframe(df, use_container_width=True)
with col2:
    st.plotly_chart(fig, use_container_width=True)

使用列布局展示数据表格和可视化图表。

四、界面展示

4.1 主界面

主界面采用双列布局，左侧显示数据表格，右侧显示可视化图表。

4.2 侧边栏

侧边栏包含配置选项，可以调整数据量和图表类型。

4.3 数据筛选

支持多选筛选数据类别，筛选结果实时更新。

4.4 统计信息

使用指标卡片展示关键统计信息。

五、运行应用

streamlit run demo_app.py

运行后，应用将在浏览器中自动打开，默认地址为：http://localhost:8501

六、功能特点

1. 交互式配置

   • 可调整数据点数量
   • 支持多种图表类型
   • 实时数据筛选

2. 数据可视化

   • 支持折线图、柱状图、散点图、饼图
   • 自适应布局
   • 交互式图表

3. 数据操作

   • 数据预览
   • 统计信息展示
   • CSV格式导出

七、优化建议

1. 性能优化

   • 使用@st.cache_data缓存数据
   • 限制数据显示数量
   • 优化图表渲染

2. 界面优化

   • 添加加载动画
   • 优化错误提示
   • 改善移动端适配

八、总结

通过这个简单的示例，我们展示了Streamlit的基本用法：

1. 页面布局和组件使用
2. 数据处理和可视化
3. 交互功能实现

Streamlit的优势在于：

• 快速开发
• 简单易用
• 丰富的组件
• 良好的可扩展性

参考资料

1. Streamlit官方文档
2. Plotly Express文档
3. Pandas文档
4. Streamlit Gallery

最终效果