1
import streamlit as st
2
import pandas as pd
3
import numpy as np
4
import matplotlib.pyplot as plt

1
# 展示一级标题
2
st.header('2. 使用')
3

4
# 展示二级标题
5
st.subheader('2.1 生成 Markdown 文档')
6

7
# 纯文本
8
st.text("""导入 streamlit 后，就可以直接使用 st.markdown() 初始化，
9
该方法支持 markdown 语法""")
10

11
# markdown
12
st.markdown('markdown用法：**加粗**，*倾斜* \n - 1 \n- 2 ')
13

14
# 展示代码，有高亮效果
15
code2 = '''import streamlit as st
16
st.markdown('Streamlit 初步学习')'''
17
st.code(code2, language='python')

1
# 展示一级标题
2
st.header('3. 图表')
3

4
# markdown
5
st.markdown('关于数据的展示，streamlit 由两个组件进行支持')
6
st.markdown('- table：普通的表格，用于静态数据的展示')
7
st.markdown('- dataframe：高级的表格，可以进行数据的操作，比如排序')
8

9
# 展示二级标题
10
st.subheader('3.1 Table 的示例')
11

12
df = pd.DataFrame(
13
    np.random.randn(10, 5),
14
    columns=('第%d列' % (i+1) for i in range(5))
15
)
16

17
st.table(df)
18

19

20
# 展示二级标题
21
st.subheader('3.2 DataFrame 的示例')
22
st.dataframe(df.style.highlight_max(axis=0))

1
# 展示一级标题
2
st.header('4. 监控组件')
3
# markdown
4
st.markdown('streamlit 也为你提供的 metric 组件')
5

6
col1, col2, col3 = st.columns(3)
7
col1.metric("温度", "70 °F", "1.2 °F")
8
col2.metric("风速", "9 mph", "-8%")
9
col3.metric("湿度", "86%", "4%")

1
# 展示一级标题
2
st.header('5. 原生图表组件')
3

4
# markdown
5
st.markdown('Streamlit 原生支持多种图表：')
6
st.markdown('- st.line_chart：折线图')
7
st.markdown('- st.area_chart：面积图')
8
st.markdown('- st.bar_chart：柱状图')
9
st.markdown('- st.map：地图')
10

11

12
# 展示二级标题
13
st.subheader('5.1 折线图')
14
chart_data = pd.DataFrame(
15
    np.random.randn(20, 3),
16
    columns=['a', 'b', 'c'])
17

18
st.line_chart(chart_data)
19

20

21
# 展示二级标题
22
st.subheader('5.2 面积图')
23
chart_data = pd.DataFrame(
24
    np.random.randn(20, 3),
25
    columns = ['a', 'b', 'c'])
26

27
st.area_chart(chart_data)
28
st.area_chart(chart_data,x_label='x',y_label='y',stack='center')
29
st.area_chart(chart_data,x_label='x',y_label='y',stack=True)
30
st.area_chart(chart_data,x_label='x',y_label='y',stack=False)
31

32

33
# 展示二级标题
34
st.subheader('5.3 柱状图')
35

36
chart_data = pd.DataFrame(
37
    np.random.randn(5, 3),
38
    columns = ["a", "b", "c"])
39
st.bar_chart(chart_data)
40
st.bar_chart(chart_data,stack=False)
41
st.bar_chart(chart_data,stack=False,horizontal=True)
42

43

44

45
# 展示二级标题
46
st.subheader('5.3 地图')
47
df = pd.DataFrame(
48
    np.random.randn(1000, 2) / [50, 50] + [39.91, 116.41],
49
    columns=['lat', 'lon']
50
)
51
st.map(df)

1
# 展示一级标题
2
st.header('6. 外部图表组件')
3

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

10
    - st.pyplot
11
    - st.bokeh_chart
12
    - st.altair_chart
13
    - st.altair_chart
14
    - st.vega_lite_chart
15
    - st.plotly_chart
16
    - st.pydeck_chart
17
    - st.graphviz_chart
18
    """
19
    )
20

21
# 展示二级标题
22
st.subheader('6.1 matplotlib.pyplot')
23

24
arr = np.random.normal(1, 1, size=100)
25
print(arr)
26
fig, ax = plt.subplots()
27
ax.hist(arr, bins=20)
28
st.pyplot(fig)