You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Streamlit循环中更新Echarts而非新增图表?

解决Streamlit动态更新Echarts不新增图表的问题

问题出在你没给Echarts用st.empty()占位符,还设置了动态的key,导致每次循环都渲染新组件。按下面的方式修改即可实现替换更新:

修改思路

  • 给Echarts单独创建一个st.empty()占位符,和文本的占位符一样,用来承载图表并实现替换更新
  • 固定st_echarts的key值,不要用动态的时间戳,否则Streamlit会把每次调用当成新组件

修改后的代码

import time
import datetime
import streamlit as st
from streamlit_echarts import st_echarts

def render(url):
    # 这里是你的业务逻辑,返回markdown文本和Echarts配置项
    return "动态更新的文本内容", {
        "xAxis": {"type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},
        "yAxis": {"type": "value"},
        "series": [{"data": [120 + int(time.time())%100, 200, 150, 80, 70, 110, 130], "type": "bar"}]
    }

url = st.text_input("输入目标URL")
# 分别为文本和图表创建独立的占位符
text_placeholder = st.empty()
echart_placeholder = st.empty()

if url:
    while True:
        time.sleep(1)
        markdown, option = render(url)
        # 更新文本内容
        text_placeholder.text(markdown)
        # 更新图表,固定key值确保是同一个组件
        echart_placeholder.st_echarts(
            option, width="450px", height="350px", key="dynamic_echart"
        )

关键说明

  1. 占位符的作用:st.empty()会在页面预留一个位置,后续调用其对应的组件方法(比如.text()、.st_echarts())时,会直接替换这个位置的内容,而不是在页面新增。
  2. 固定key的必要性:Streamlit通过key识别组件身份,动态的时间戳key会让每次调用都被判定为新组件,导致新增图表;固定key后,Streamlit会识别为同一个组件,只更新配置项数据。

内容的提问来源于stack exchange,提问作者Sayan Dey

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.10 03:01:17