pyecharts 生成的图表网页 拖拽布局之后如何保存为一个固定的网页

如果您想要将拖拽布局后的图表网页保存为一个固定的网页，可以使用前端的一些技术，比如 `localStorage` 和 `XMLHttpRequest`。

`localStorage` 是 HTML5 中新增的一种本地存储方式，可以将数据存储在客户端，不需要每次都从服务器获取数据。

`XMLHttpRequest` 是一种用于在客户端和服务器之间发送 HTTP 请求的对象，可以使用它将数据发送到服务器。

下面是具体的实现步骤：

1. 在前端页面中添加一个按钮，当用户点击该按钮时，将拖拽布局后的图表网页保存为一个固定的网页。

<button onclick="savePage()">保存网页</button>

<script>
function savePage() {
    // 获取图表容器
    var chartContainer = document.getElementById('chart-container');

    // 将图表容器的 HTML 代码保存到 localStorage 中
    localStorage.setItem('chart_html', chartContainer.innerHTML);

    // 发送一个 XMLHttpRequest 请求到服务器，将图表容器的 HTML 代码上传到服务器
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/save_page');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('chart_html=' + encodeURIComponent(chartContainer.innerHTML));
}
</script>

在上面的代码中，`chart-container` 是图表容器的 ID，`/save_page` 是将数据上传到服务器的 URL。您需要根据自己的需求修改这些参数。

2. 在服务器端接收到数据后，将数据保存为一个固定的网页。

import os
from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/save_page', methods=['POST'])
def save_page():
    # 获取图表容器的 HTML 代码
    chart_html = request.form.get('chart_html')

    # 将 HTML 代码保存为一个固定的网页
    with open('chart_page.html', 'w', encoding='utf-8') as f:
        f.write(render_template('chart_template.html', chart_html=chart_html))

    return 'success'

if __name__ == '__main__':
    app.run()

在上面的代码中，`chart_template.html` 是一个包含图表容器的 HTML 模板，`chart_html` 是图表容器的 HTML 代码。在模板中，您可以使用 `{{ chart_html }}` 的语法将图表容器的 HTML 代码插入到模板中。

3. 最后，您可以使用浏览器打开保存的固定网页，查看拖拽布局后的图表。

通过上面的步骤，您就可以将拖拽布局后的图表网页保存为一个固定的网页了。