2024年最全一个傻瓜式构建可视化 web的 Python 神器 ——streamlit

这些代码直接拷贝保存，就可以在本地直接通过如下命令直接运行

➜ streamlit run st-demo.py

# 2. Markdown 文本

=================

导入 streamlit 后，就可以直接使用 st.markdown 初始化，调用不同的方法，就可以往文档对象中填入内容

• st.title：文章大标题

• st.header：一级标题

• st.subheader：二级标题

• st.text：文本

• st.code：代码，同时可设置代码的语言，显示的时候会高亮

• st.latex：latex 公式

• st.caption：小字体文本

如下我自己写的一个小 Demo，供你参考

import streamlit as st

markdownst.markdown(‘Streamlit Demo’)

设置网页标题st.title(‘一个傻瓜式构建可视化 web的 Python 神器 – streamlit’)

展示一级标题st.header(‘1. 安装’)

st.text(‘和安装其他包一样，安装 streamlit 非常简单，一条命令即可’)

code1 = ‘’‘pip3 install streamlit’‘’

st.code(code1, language=‘bash’)

展示一级标题st.header(‘2. 使用’)

展示二级标题st.subheader(‘2.1 生成 Markdown 文档’)

纯文本st.text(‘导入 streamlit 后，就可以直接使用 st.markdown 初始化’)

展示代码，有高亮效果code2 = ‘’'import streamlit as st

st.markdown(‘Streamlit Demo’)‘’’

st.code(code2, language=‘python’)

Streamlit 运行的方式 与普通的脚本 有所不同，应该使用 streamlit run st-demo.py

运行后就会自动打开浏览器加载这个页面，如果没有自动打开，也可以手动拷贝上图中的链接打开访问。

是不是有点那个味了？就这，还只是开胃菜～

# 3. 数据图表支持

============

3.1 图表组件

---

关于数据的展示，streamlit 由两个组件进行支持

• table：普通的表格，用于静态数据的展示

• dataframe：高级的表格，可以进行数据的操作，比如排序

Table 的示例

df = pd.DataFrame(

np.random.randn(10, 5),

columns=(‘第%d列’ % (i+1) for i in range(5))

)st.table(df)

效果如下

Datafram 的示例

df = pd.DataFrame(

np.random.randn(10, 5),

columns=(‘第%d列’ % (i+1) for i in range(5))

)st.dataframe(df.style.highlight_max(axis=0))

效果如下，可以看到在图示外，有个向下的小箭头，你点一下，就会进行排序

除此之外，你还能看到我对最大值进行了高亮显示，原因是我传入的参数是 df.style.highlight_max(axis=0)

其实还有 n 多种样式，比如：

• highlight_：空值高亮

• highlight_min：最小值高亮

• highlight_max：最大值高亮

• highlight_between：某区间内的值高亮

• highlight_quantile：暂没用过

这些你都可以在源代码中找到示例

3.2 监控组件

---

在采集到一些监控数据后，若你需要做一个监控面板， streamlit 也为你提供的 metric 组件

如下代码创建 三个指标，并且填入对应的数据

col1, col2, col3 = st.columns(3)

col1.metric(“Temperature”, “70 °F”, “1.2 °F”)

col2.metric(“Wind”, “9 mph”, “-8%”)

col3.metric(“Humidity”, “86%”, “4%”)

刷新页面，就能看到下面的效果

3.3 原生图表组件

---

Streamlit 原生支持多种图表：

• st.line_chart：折线图

• st.area_chart：面积图

• st.bar_chart：柱状图

• st.map：地图

下面一一展示

折线图

chart_data = pd.DataFrame(

np.random.randn(20, 3),

columns=[‘a’, ‘b’, ‘c’])

st.line_chart(chart_data)

面积图

chart_data = pd.DataFrame(

np.random.randn(20, 3),

columns = [‘a’, ‘b’, ‘c’])

st.area_chart(chart_data)

柱状图

chart_data = pd.DataFrame(

np.random.randn(50, 3),

columns = [“a”, “b”, “c”])

st.bar_chart(chart_data)

地图

df = pd.DataFrame(

np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],

columns=[‘lat’, ‘lon’]

)st.map(df)

3.4 外部图表组件

---

Streamlit 的一些原生图表组件，虽然做到了傻瓜式，但仅能输入数据、高度和宽度，如果你想更漂亮的图表，就像 matplotlib.pyplot、Altair、vega-lite、Plotly、Bokeh、PyDeck、Graphviz 那样，streamlit 也提供了支持：

• st.pyplot

• st.bokeh_chart

• st.altair_chart

• st.altair_chart

• st.vega_lite_chart

• st.plotly_chart

• st.pydeck_chart

• st.graphviz_chart

对于这部分，熟悉的同学自行尝试了，这里不再演示。

# 4. 用户操作支持

============

前面 streamlit 都只是展示文本和数据，如果仅是如此，那 streamlit 也就 just so so

对于那些不会前端，并且平时有需要写一些简单的页面的人说，能写一些交互界面才是硬需求。

庆幸的是，你平时在网页上、app 上能看到的交互组件，Streamlit 几乎都能支持。。

• button：按钮

• download_button：文件下载

• file_uploader：文件上传

• checkbox：复选框

• radio：单选框

• selectbox：下拉单选框

• multiselect：下拉多选框

• slider：滑动条

• select_slider：选择条

• text_input：文本输入框

• text_area：文本展示框

• number_input：数字输入框，支持加减按钮

• date_input：日期选择框

• time_input：时间选择框

• color_picker：颜色选择器

这些内容非常多，也比较简单，一个一个举例也没必要，大家直接去看 streamlit 源码里的注释即可。

# 5. 多媒体组件

===========

想要在页面上播放图片、音频和视频，可以使用 streamlit 的这三个组件：

• st.image

• st.audio

• st.video

# 6. 状态组件

==========

状态组件用来向用户展示当前程序的运行状态，包括：

• progress：进度条，如游戏加载进度

• spinner：等待提示

• balloons：页面底部飘气球，表示祝贺

• error：显示错误信息

• warning：显示报警信息

• info：显示常规信息

• success：显示成功信息

• exception：显示异常信息（代码错误栈）

感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的：

①　2000多本Python电子书（主流和经典的书籍应该都有了）

②　Python标准库资料（最全中文版）

③　项目源码（四五十个有趣且经典的练手项目及源码）

④　Python基础入门、爬虫、web开发、大数据分析方面的视频（适合小白学习）

⑤ Python学习路线图（告别不入流的学习）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里无偿获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！