如何在Flutter中不丢失数据刷新页面并适配piehart库？

核心思路是监听内部变量变化，触发页面或图表的重新渲染，针对Pyecharts需要保证每次刷新都用最新变量生成图表配置。以下是两种常用场景的具体实现：

场景1：Flask + 前端页面（通用Web场景） #

通过后端接口提供最新变量，前端定时检查变化并刷新Pyecharts图表。

后端代码（Flask） #

from flask import Flask, render_template, jsonify
from pyecharts.charts import Pie
from pyecharts import options as opts
import threading
import time
import random

app = Flask(__name__)
# 模拟程序内部维护的动态变量
current_data = {"labels": ["A", "B", "C"], "values": [30, 40, 30]}

def background_data_update():
    """后台线程模拟程序运行中变量自动更新"""
    global current_data
    while True:
        time.sleep(5)
        current_data["values"] = [random.randint(20, 50) for _ in range(3)]

# 启动后台更新线程
threading.Thread(target=background_data_update, daemon=True).start()

@app.route("/")
def index_page():
    return render_template("pie_chart.html")

@app.route("/api/latest_data")
def get_latest_data():
    """提供接口返回最新变量值"""
    return jsonify(current_data)

@app.route("/api/generate_pie_config")
def generate_pie_config():
    """用最新变量生成Pyecharts配置"""
    pie = (
        Pie()
        .add("", list(zip(current_data["labels"], current_data["values"])))
        .set_global_opts(title_opts=opts.TitleOpts(title="实时更新饼图"))
    )
    return pie.dump_options_with_quotes()

if __name__ == "__main__":
    app.run(debug=True)

前端页面（templates/pie_chart.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时饼图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="pie_container" style="width: 600px; height: 400px;"></div>

    <script>
        const chart = echarts.init(document.getElementById('pie_container'));
        let lastValues = null;

        // 每秒检查一次变量是否更新
        setInterval(() => {
            fetch('/api/latest_data')
                .then(res => res.json())
                .then(data => {
                    // 对比值是否变化，避免无意义刷新
                    if (JSON.stringify(data.values) !== JSON.stringify(lastValues)) {
                        lastValues = data.values;
                        // 请求最新的饼图配置并渲染
                        fetch('/api/generate_pie_config')
                            .then(configRes => configRes.json())
                            .then(option => {
                                chart.setOption(option, true);
                            });
                    }
                });
        }, 1000);
    </script>
</body>
</html>

场景2：Streamlit（快速原型场景） #

Streamlit自带页面刷新机制，结合会话状态存储变量，实现自动刷新更简洁。

import streamlit as st
from pyecharts.charts import Pie
from pyecharts import options as opts
from streamlit_echarts import st_pyecharts
import time
import random

# 初始化会话级变量，避免每次刷新重置
if "dynamic_data" not in st.session_state:
    st.session_state.dynamic_data = {"labels": ["A", "B", "C"], "values": [30, 40, 30]}

def update_internal_variable():
    """模拟程序运行中变量更新"""
    st.session_state.dynamic_data["values"] = [random.randint(20, 50) for _ in range(3)]

# 手动触发更新按钮
if st.button("立即更新数据"):
    update_internal_variable()

# 自动刷新：每5秒触发一次页面重跑，加载最新变量
time.sleep(5)
st.experimental_rerun()

# 用最新变量生成并渲染饼图
pie_chart = (
    Pie()
    .add("", list(zip(st.session_state.dynamic_data["labels"], st.session_state.dynamic_data["values"])))
    .set_global_opts(title_opts=opts.TitleOpts(title="Streamlit实时饼图"))
)
st_pyecharts(pie_chart)

关键注意点 #

• 若需要更低延迟的更新，可将前端轮询改为WebSocket通信，减少服务器请求压力
• Pyecharts的dump_options_with_quotes()方法会生成前端可直接解析的JSON配置，避免引号转义问题
• 多用户场景下，要注意变量的会话隔离（Flask可使用session对象，Streamlit默认会话隔离）

内容的提问来源于stack exchange，提问作者Reza Hejazi