利用Streamlit与Python构建交互式Web数据可视化应用

青禾

发布时间：2026-10-14 | 4人浏览过

原创

本文详细介绍如何使用Python的Streamlit库快速构建交互式Web可视化页面。通过结合pandas处理Excel数据、plotly绘制动态图表，实现了基于滑动条和复选框的数据过滤与实时展示。教程涵盖环境配置、代码实现及本地部署步骤，帮助开发者轻松创建无需前端知识的数据应用。

Streamlit实时数据更新特性

当Excel文件发生更改并保存时，Web页面能够实时同步更新，这一特性非常实用。

Streamlit的官方文档和教程资源如下。

https://docs.streamlit.io/en/stable/

https://streamlit.io/gallery

具体的API使用方法可查阅文档，其中提供了详尽的解释。

本项目包含三个主要部分：程序代码、图片素材以及Excel表格数据。

数据背景为某公司年底进行的问卷调查（虚构数据），旨在评估各相关部门对生产部门在工作协作方面的评分。

有效数据总量约为676条，采用匿名问卷形式，字段包括填写人所属部门、年龄及评分。

最后对参与各部门的人数进行了汇总统计（见右侧数据）。

环境配置与依赖安装

首先安装所需的Python库，此处使用百度源进行加速。


# 安装streamlit
pip install streamlit -i https://mirror.baidu.com/pypi/simple/

# 安装Plotly Express
pip install plotly_express==0.4.0 -i https://mirror.baidu.com/pypi/simple/

# 安装xlrd
pip install xlrd==1.2.0 -i https://mirror.baidu.com/pypi/simple/

由于数据文件为xlsx格式，而最新版的xlrd仅支持xls文件。

因此需指定安装版本为1.2.0的xlrd，以确保pandas能正确读取数据。

在命令行终端启动网页服务。


# 命令行终端打开文件所在路径
cd Excel_Webapp

# 运行网页
streamlit run app.py

启动成功后会有相应提示，且浏览器会自动弹出网页界面。

若未自动弹出，可直接访问图中显示的地址。

最终结果如所示，一个数据可视化网页已成功生成。

目前该应用仅支持本地访问，若需部署至公网，需自行研究服务器部署方案。

核心代码实现与交互逻辑

接下来查看具体的代码实现。


import pandas as pd
import streamlit as st
import plotly.express as px
from PIL import Image

# 设置网页名称
st.set_page_config(page_title='调查结果')
# 设置网页标题
st.header('2020年调查问卷')
# 设置网页子标题
st.subheader('2020年各部门对生产部的评分情况')

导入必要的Python包：pandas用于数据处理，streamlit用于生成网页，plotly.express负责图表生成，PIL用于读取图片。

设置网页标题及子标题信息。


# 读取数据
excel_file = '各部门对生产部的评分情况.xlsx'
sheet_name = 'DATA'

df = pd.read_excel(excel_file,
                   sheet_name=sheet_name,
                   usecols='B:D',
                   header=3)

# 此处为各部门参加问卷调查人数
df_participants = pd.read_excel(excel_file,
                                sheet_name=sheet_name,
                                usecols='F:G',
                                header=3)
df_participants.dropna(inplace=True)

# streamlit的多重选择(选项数据)
department = df['部门'].unique().tolist()
# streamlit的滑动条(年龄数据)
ages = df['年龄'].unique().tolist()

读取Excel数据，并统计年龄分布及部门情况，共涉及5个部门。

添加滑动条组件及多重选择框以支持数据筛选。


# 滑动条, 最大值、最小值、区间值
age_selection = st.slider('年龄:',
                          min_value=min(ages),
                          max_value=max(ages),
                          value=(min(ages), max(ages)))

# 多重选择, 默认全选
department_selection = st.multiselect('部门:',
                                      department,
                                      default=department)

筛选结果如下。

年龄范围设定为23至65岁，部门选项包括市场、物流、采购、销售、财务。

由于滑动条和多重选择框的内容可变，需根据筛选条件获取最终数据。


# 根据选择过滤数据
mask = (df['年龄'].between(*age_selection)) & (df['部门'].isin(department_selection))
number_of_result = df[mask].shape[0]

# 根据筛选条件, 得到有效数据
st.markdown(f'*有效数据: {number_of_result}*')

# 根据选择分组数据
df_grouped = df[mask].groupby(by=['评分']).count()[['年龄']]
df_grouped = df_grouped.rename(columns={'年龄': '计数'})
df_grouped = df_grouped.reset_index()

获取数据后即可绘制柱状图。


# 绘制柱状图, 配置相关参数
bar_chart = px.bar(df_grouped,
                   x='评分',
                   y='计数',
                   text='计数',
                   color_discrete_sequence=['#F63366']*len(df_grouped),
                   template='plotly_white')
st.plotly_chart(bar_chart)

使用plotly库绘制柱状图。

当在网页调整选项时，有效数据及柱状图会随之动态变化。

图片与交互式表格展示

此外，Streamlit还支持在网页中添加图片和交互式表格。


# 添加图片和交互式表格
col1, col2 = st.beta_columns(2)
image = Image.open('survey.jpg')
col1.image(image,
           caption='Designed by 小F / 法纳斯特',
           use_column_width=True)
col2.dataframe(df[mask], width=300)

最终效果如下。

可以看到表格中包含滑动条，可通过鼠标滚轮滚动查看内容。

饼图绘制与数据占比分析

最后绘制一个饼图。


# 绘制饼图
pie_chart = px.pie(df_participants,
                   title='总的参加人数',
                   values='人数',
                   names='公司部门')
st.plotly_chart(pie_chart)

结果如下。