Streamlit Dashboard App Templates 实战指南官方数据看板模板与十大规范模式【免费下载链接】streamlitStreamlit — A faster way to build and share data apps.项目地址: https://gitcode.com/gh_mirrors/st/streamlit本指南以 Streamlit 仓库内置的 Dashboard 模板集lib/streamlit/.agents/skills/developing-with-streamlit/assets/templates/apps/README.md为主线系统讲解 6 个可直接运行的看板模板以及它们背后沉淀的页面配置、时间范围过滤、st.fragment(parallelTrue)并行卡片、st.skeleton占位、st.cache_data(ttl...)数据缓存等一套可复用的规范模式。读完本文你将能够开箱运行任何一个模板并掌握用 Streamlit 构建高性能数据驱动看板的完整套路。模板总览两套模板六种形态该目录下的模板分为两类一类是基于官方演示应用、开箱即用的公共演示模板另一类是使用合成数据演示常见看板模式的分析型模板只需把数据生成函数替换成真实数据源即可用于生产。公共演示模板模板说明核心特性dashboard-seattle-weather西雅图天气数据探索看板st.metric、st.pills、st.altair_chart、年度对比dashboard-stock-peers股票同侪分析与对比st.multiselect、归一化图表、同侪均值计算分析型看板模板模板说明核心特性dashboard-metrics核心指标看板KPIst.fragment(parallelTrue)卡片 st.skeleton、图表/表格切换、st.popover过滤器、TIME_RANGES1M/6M/1Y/QTD/YTD/Alldashboard-feature-usageAPI 端点用量分析分段控件、预设方案starter kits、归一化开关、滚动均值、条件渲染的 Raw data 折叠区on_changererundashboard-companies公司排行榜与下钻交互式 dataframe、sparkline 列、增长分数、自定义缓存 spinnerdashboard-compute资源消耗监控st.fragment(parallelTrue)st.skeleton、st.popover过滤器、TIME_RANGES、折线/柱状切换快速开始本地运行一个模板模板目录中每个应用都是独立的 Python 项目使用uv作为包管理器。运行命令如下以 dashboard-metrics 为例# 进入模板目录 cd lib/streamlit/.agents/skills/developing-with-streamlit/assets/templates/apps/dashboard-metrics # 依据 pyproject.toml 同步依赖 uv sync # 启动应用 uv run streamlit run streamlit_app.py运行后浏览器会自动打开看板页面。由于模板使用合成数据生成函数不需要任何外部服务即可完整体验所有交互特性替换数据源后即可直接对接真实业务数据。模板结构统一的目录约定每个模板都遵循相同的目录结构便于复制与改造dashboard-{name}/ ├── streamlit_app.py # 主应用代码 └── pyproject.toml # 依赖与元数据以 dashboard-metrics/pyproject.toml 为例其依赖声明如下[project] name dashboard-metrics version 1.0.0 description A metrics dashboard template showing time series with sparklines and filtering requires-python 3.10 dependencies [ altair5.5.0, numpy1.26.0, pandas2.2.3, streamlit, ]规范模式一页面配置所有模板都要求把st.set_page_config作为第一个 Streamlit 调用且固定使用layoutwide和一个 Material 图标st.set_page_config( page_titleMy Dashboard, page_icon:material/monitoring:, layoutwide, )从源码看每个模板都严格遵守该约定例如 dashboard-metrics/streamlit_app.py 使用page_icon:material/monitoring:dashboard-compute/streamlit_app.py 使用:material/bolt:dashboard-stock-peers/streamlit_app.py 使用:material/query_stats:。Material 图标:material/xxx:语法无需额外资源即可渲染宽屏布局则给多列卡片和图表留足空间。规范模式二标准常量命名模板统一使用以下常量名保证跨模板可读性与一致性TIME_RANGES [1M, 6M, 1Y, QTD, YTD, All] CHART_HEIGHT 300 # 标准图表高度像素在 dashboard-metrics 中对应 TIME_RANGES 与 CHART_HEIGHT 的定义dashboard-compute 使用CHART_HEIGHT 350并额外定义ACCOUNT_TYPES、INSTANCE_TYPES、REGIONS等维度常量。规范模式三时间范围过滤所有支持时间过滤的看板模板都复用同一个filter_by_time_range函数对相对时间窗口给出统一的语义def filter_by_time_range(df: pd.DataFrame, x_col: str, time_range: str) - pd.DataFrame: Filter dataframe by time range. if time_range All or df.empty: return df df df.copy() df[x_col] pd.to_datetime(df[x_col]) max_date df[x_col].max() if time_range 1M: min_date max_date - timedelta(days30) elif time_range 6M: min_date max_date - timedelta(days180) elif time_range 1Y: min_date max_date - timedelta(days365) elif time_range QTD: quarter_month ((max_date.month - 1) // 3) * 3 1 min_date pd.Timestamp(date(max_date.year, quarter_month, 1)) elif time_range YTD: min_date pd.Timestamp(date(max_date.year, 1, 1)) else: return df filtered: pd.DataFrame df[df[x_col] min_date] return filtered该函数以数据自身的最大日期为基准计算起点1M/6M/1Y分别向前推 30/180/365 天QTD回到当前季度首日YTD回到当年 1 月 1 日。它在 dashboard-metrics/streamlit_app.py 与 dashboard-compute/streamlit_app.py 中逐字复用保证行为完全一致。规范模式四Popover 过滤器紧凑型过滤控件使用st.popover收纳让过滤器不占用主区域空间with st.popover(Filters, typetertiary): line_options st.pills(Lines, [Daily, 7-day MA], selection_modemulti) time_range st.segmented_control(Time range, TIME_RANGES, defaultAll)在 dashboard-metrics 的卡片实现中popover 内还包含视图切换与多选 pills所有 widget 使用f{metric_name}_xxx作为 key 前缀做状态隔离见 metric_card 函数。dashboard-compute 的 popover 则承载更多控件维度多选、折线/柱状切换、百分比归一化开关与时间范围全部以key_prefix隔离状态。规范模式五页面头部与重置按钮看板头部统一由render_page_header渲染标题与重置按钮水平排布def render_page_header(title: str): Render page header with title and reset button. with st.container( horizontalTrue, horizontal_alignmentdistribute, vertical_alignmentcenter ): st.markdown(title) if st.button(:material/restart_alt: Reset, typetertiary): st.session_state.clear() st.rerun()点击重置按钮会清空全部会话状态并触发st.rerun()把所有过滤器恢复到默认值是看板应用最常见的一键复原交互。该函数在 dashboard-metrics 与 dashboard-compute 中保持一致。规范模式六用 st.fragment 实现独立并行的卡片更新这是分析型模板最核心的性能模式。每个卡片用st.fragment包裹使 widget 交互只重跑该卡片而非整个页面当多个卡片各自有独立的、计算密集的数据加载时加上parallelTrue让它们在整页重跑时并发执行。加载体用st.skeleton包裹卡片在数据就绪前先显示占位符st.fragment(parallelTrue) def metric_card(metric_name: str): with st.container(borderTrue): st.markdown(f**{metric_name}**) # 标题保持稳定不随加载闪烁 with st.skeleton(height300): data load_metric(metric_name) # 缓存 并行加载 st.line_chart(data)需要特别注意的约束不要把st.dialog、st.switch_page以及对 fragment 之外创建的容器的写入放进并行 fragment 里。这类操作应放在 widget 交互之后此时 fragment 是串行重跑的再执行否则会与并行执行模型冲突。这一约束在 dashboard-metrics 的metric_card源码位置中有完整示范标题、控件保持在 skeleton 之外数据加载与图表渲染放在st.skeleton内部。规范模式七带缓存的数据加载昂贵的数据加载必须缓存并用ttl必要时配合max_entries约束让缓存既保持新鲜又不会无限增长。直接运行在页面中的 loader 使用自定义 spinner 文案只有当周围已有加载 UI如st.skeleton时才使用show_spinnerFalsest.cache_data(ttl1h, show_spinnerLoading metric data...) def load_metric_data() - pd.DataFrame: Load metric data. Replace with your actual data source. # 替换为真实数据源 # - API 调用 # - 数据库查询 # - 通过 st.connection 查询数据仓库 return generate_synthetic_data()TTL 选型指南README 明确给出的经验法则实时数据→ttl1m指标/报表→ttl5m–15m参考数据→ttl1h或更长静态数据→ 不设 TTL对于参数化 loader应使用max_entries限制缓存条目数量保证按参数分键的缓存不失控。该模式在各模板中的落地dashboard-metrics 的load_metric使用st.cache_data(ttl1h, show_spinnerFalse)按指标名分别缓存配合并行 fragment 并发加载源码dashboard-feature-usage 的load_api_data使用自定义 spinnerLoading API usage data...源码dashboard-companies 的load_company_data同样带自定义 spinner源码dashboard-stock-peers 的load_data使用ttl6h并捕获YFRateLimitError在触发限流时主动load_data.clear()清掉坏缓存条目源码。六个模板逐一解析dashboard-metricsKPI 卡片看板核心指标看板展示 4 个指标Active users、Sessions、Revenue、Conversions的两行卡片网格。每张卡片是一个并行 fragment内部提供图表/表格视图切换st.segmented_control图标为:material/show_chart:/:material/table:popover 过滤器Daily / 7-day MA 多选 时间范围4 种图表渲染器render_line_chart、render_area_chart、render_bar_chart按周聚合提升可读性、render_point_chart散点 7 日均线虚线段。数据生成方面generate_metric_data使用hashlib.sha256(metric_name)派生固定随机种子保证同一指标每次生成的数据可复现并模拟增长趋势、周末季节性与噪声源码。各指标的基准值与增长率集中配置在METRIC_CONFIG字典中替换数据源时只需改这一个配置块。dashboard-feature-usageAPI 端点用量分析按 API 分类Users/Orders/Products/Analytics探索端点用量交互链完整分类用st.segmented_control选择Starter kits 预设方案Core CRUD、Search、Analytics、High Volume通过st.pills一键批量选中端点源码时间聚合支持 Raw / 7-day / 28-day 滚动均值ROLLING_OPTIONSNormalize 开关把请求数归一化为每日占比normalize_data按日求和后相除Latest numbers 用st.metric展示每个端点最新值与 28 天增量左侧过滤器列 右侧图表列用st.columns([1, 2])布局。该模板还示范了一个重要的性能技巧折叠区条件渲染。Raw data 折叠区默认收起借助on_changererun读取raw_data_section.open状态只有用户真正展开时才构建并下发 dataframe避免每次重跑都计算并传输大数据帧源码。归一化开启时还通过st.column_config.NumberColumn(formatpercent)把请求列渲染成百分比。dashboard-companies公司排行榜与下钻面向客户采用度分析的公司看板核心是交互式 dataframe 弹窗下钻aggregate_companies按公司聚合出总 credits、活跃天数、日均值、sparkline 序列与增长分数后半年减前半年的粗粒度趋势指标见_calc_growthst.dataframe使用column_config精细配置每一列LineChartColumn渲染 sparkline 趋势列MultiselectColumn以彩色 chip 展示账户类型/区域/行业NumberColumn定制数值格式源码排行榜支持on_selectrerunselection_modesingle-cell点击公司名列的单元格即触发st.dialog弹窗展示账户徽章:blue-badge等、三项指标与日用量/累计用量双图表源码。顶部过滤器区提供排序模式Top spenders / Top shrinkers / Top gainers、时间窗口All time / 28 天 / 7 天与账户类型多选 pills。dashboard-compute资源消耗监控计算资源credits监控看板把按维度拆分抽象成可复用的dimension_metricfragment传入 loader、维度列、选项列表与key_prefix即可生成一张自带图表/表格切换、popover 过滤、折线/柱状切换、百分比归一化与时间范围过滤的卡片源码。三个维度账户类型、实例类型、区域各有一个独立的st.cache_data(ttl1h)loader按维度 key 缓存 2 年的日粒度数据柱状图支持stacknormalize的百分比堆叠模式。布局为两行第一行两张卡片第二行区域维度占满整行。dashboard-seattle-weather官方演示数据看板基于 Altair 经典案例数据集vega_datasets.data(seattle_weather)的天气探索应用加载函数用st.cache_data(show_spinnerLoading weather data...)缓存。特性包括2015 vs 2014 六组st.metric最高/最低温度、降水、风速带年度差值的delta最常见的天气用 Material 图标 大写文案展示st.pills多选年份实现Compare different years不同年份按颜色分组叠加Altair 图表矩阵温度区间条形图Y/Y2编码、天气分布环形图mark_arc、月度降水柱状图、按月堆叠的天气占比以及用st.line_chart的多年风速折线所有图表区块用st.container(borderTrue, heightstretch)等高管线布局。完整实现见 dashboard-seattle-weather/streamlit_app.py。dashboard-stock-peers股票同侪分析股票对比看板内置约 100 个美股代码默认选中 AAPL/MSFT/GOOGL/NVDA/AMZN/TSLA/META。亮点特性st.multiselect绑定bindquery-params股票选择自动同步到 URL 查询参数?stocksAAPLstocksMSFT看板可直接分享无需手写st.query_params管道源码accept_new_optionsTrue允许输入自定义代码时间跨度从 1 个月到 20 年用st.pills选择归一化处理以每只股票首个非空值为基准data.div(data.bfill().iloc[0])规避新上市股票首行为 NaN 的问题源码Best/Worst stock 用归一化末值比较输出涨跌幅 delta每只股票单独生成个股 vs 同侪均值剔除自身折线与差值面积图红色与灰色区分。依赖要求所有模板要求Python 3.10公共依赖如下streamlitaltair5.5.0pandas2.2.3numpy1.26.0大多数模板此外dashboard-seattle-weather额外依赖vega_datasets演示数据dashboard-stock-peers额外依赖yfinance0.2.55行情数据。各模板的完整依赖声明位于对应目录的pyproject.toml中。结语把模板当规范样本使用这 6 个模板不仅是可运行的应用更是一份可复制的看板工程规范统一使用layoutwide与 Material 图标、共享同一份filter_by_time_range语义、用st.fragment(parallelTrue)st.skeleton把卡片性能做到极致、用st.cache_data(ttl...)让缓存新鲜且有界、用st.popover收纳过滤器、用st.dialog与交互式 dataframe 实现下钻。无论你是要快速交付一个内部指标看板还是为团队沉淀一套看板开发约定都可以直接以这些模板为起点——复制目录、替换generate_*_data()为真实数据源、按需调整METRIC_CONFIG之类的配置块即可完成从演示到生产的跃迁。【免费下载链接】streamlitStreamlit — A faster way to build and share data apps.项目地址: https://gitcode.com/gh_mirrors/st/streamlit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考