一、安装streamlit

1、在anaconda中安装虚拟环境

conda create -n your_env_name python=3.7
# 其中your_env_name表示你需要创建的名字
# python可以指定对应的版本

2、检查配置环境

conda env list # 查看刚才的环境是否创建成功

3、激活虚拟环境

conda activate streamlist_test # 激活刚才新建的虚拟环境

4、安装streamlit

pip install streamlit

二、初识streamlit

如果成功，可以在localhost:8501上看见自己的streamlit官方提供的几个样例。

三、学习使用streamlit

1、创建你的第一个webApp

实现骨架

创建一个新的py文件，写下如下内容：

import streamlit as st
import numpy as np
import pandas as pd
st.title("This is my first app")
st.write("hello")

如果使用anaconda虚拟环境的，请使用Anaconda Promote，否则请使用cmd；

输入如下指令：

出现如下界面，表示第一个webapp已经运行成功！

添加文本和数据

**st.write()**是streamlit(下面简称为st)中的“无敌武器”，所有内容都可以放在这个函数内进行展示：文本、数据、图标等内容；

**st.table()和st.dataframe()**也可以被用来展示数据。

st.write("Here's our first attempt at using data to create a table:")
st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))

st提供魔法方法，进一步减少write方法的使用。

"""
# My first app
Here's our first attempt at using data to create a table:
"""
df = pd.DataFrame({
  'first column': [5, 6, 7, 8],
  'second column': [50, 60, 70, 80]
})

df

运行一下，查看效果！

import streamlit as st
import numpy as np
import pandas as pd
st.title("This is my first app")
st.write("hello")
st.write("Here's our first attempt at using data to create a table:")

df = pd.DataFrame({
  'first column': [5, 6, 7, 8],
  'second column': [50, 60, 70, 80]
})

st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))
# 其中df定义的位置，并不影响最后的输出位置！
df

绘制图表

**st.line_chart()**方法展示

绘制一个折线图

chart_data = pd.DataFrame(
     np.random.randn(20, 3),
     columns=['a', 'b', 'c'])

st.line_chart(chart_data)

**st.map()**方法展示

绘制一个地图

map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(map_data)

发现地理位置不太满意，换成江苏南京！

map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [32.37, 118.4],
    columns=['lat', 'lon'])

好家伙，跑滁州去了，没关系，南京也是徽京~

增加交互性

**st.checkbox()**单选框，更多请查询API reference

if st.checkbox('Show dataframe'):
    chart_data = pd.DataFrame(
       np.random.randn(20, 3),
       columns=['a', 'b', 'c'])
    chart_data

运行后，初试状态为：

当点击单选框后：

**st.selectbox()**选择框

option = st.selectbox(
    'Which number do you like best?',
     df['first column'])

'You selected: ', option

运行结果为：

完成数字选择后：

调整布局

为了使得你的webApp更加好看，你可以将一些不必要的内容放置到其他区域。这样可以使得你的webApp居中。

**st.sidebar()**将刚才的边框设置在左侧

tips：可以发现每次选择不同的数字，整个页面都会刷新，包括刚才设置的地图上的点也会跟着刷新，和刚才的折线图

你的webApp内的大多内容都是可以放到侧边框中，

st.sidebar.[element_name]()

例如：st.sidebar.markdown(), st.sidebar.slider(), st.sidebar.line_chart().等

你也可以使用st.beta_columns来并排布置小部件，或者使用st.beta_expander来隐藏大型内容以节省空间。

left_column, right_column = st.beta_columns(2)
pressed = left_column.button('Press me?')
if pressed:
    right_column.write("Woohoo!")

expander = st.beta_expander("FAQ")
expander.write("Here you could put in some really, really long explanations...")

运行之后的窗口

完成点击或者选择后的窗口

添加进度条

当在一个应用程序中添加长期运行的计算时，你可以使用st.progress()来实时显示状态。

首先，让我们导入时间。我们将使用time.sleep()方法来模拟一个长期运行的计算。

import time
'Starting a long computation...'

# Add a placeholder
latest_iteration = st.empty()
bar = st.progress(0)

for i in range(100):
  # Update the progress bar with each iteration.
  latest_iteration.text(f'Iteration {i+1}')
  bar.progress(i + 1)
  time.sleep(0.1)

'...and now we\'re done!'

懵逼了吧，进度条其实与真正的运行时间可以无关~