flask+Pyecharts+ajax实现分tab页展示多图

这篇文章距离上次修改已过185天，其中的内容可能已经有所变动。

以下是一个使用Flask、Pyecharts和Ajax实现的简单示例，展示了如何在Flask中使用Pyecharts生成图表，并通过Ajax异步加载到前端页面上。

首先，安装所需的库（如果尚未安装）：




pip install Flask Pyecharts

下面是Flask应用的代码示例：




from flask import Flask, render_template, request
from jinja2 import Markup
from pyecharts.charts import Bar
from pyecharts import options as opts
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/get_chart/')
def get_chart():
    tab_id = request.args.get('tab_id', 0, type=int)
    chart = Bar()
    chart.add_xaxis(["A", "B", "C", "D", "E", "F"])
    chart.add_yaxis("Series 1", [10, 20, 30, 40, 50, 60])
    if tab_id == 1:
        chart.set_global_opts(title_opts=opts.TitleOpts(title="Tab 1 Chart"))
    else:
        chart.set_global_opts(title_opts=opts.TitleOpts(title="Tab 2 Chart"))
    return Markup(chart.render_notebook())
 
if __name__ == '__main__':
    app.run(debug=True)

在templates文件夹中创建index.html文件，并添加以下内容：




<!DOCTYPE html>
<html>
<head>
    <title>Flask Pyecharts Ajax</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        function loadChart(tab_id) {
            $.ajax({
                url: '/get_chart/?tab_id=' + tab_id,
                type: 'GET',
                success: function(response) {
                    $('#chart-container-' + tab_id).html(response);
                },
                error: function(xhr, status, error) {
                    console.error("An error occurred: " + status);
                }
            });
        }
    </script>
</head>
<body>
    <div class="tab" onclick="loadChart(1)">Tab 1</div>
    <div class="tab" onclick="loadChart(2)">Tab 2</div>
 
    <div id="chart-container-1">Loading Tab 1 Chart...</div>
    <div id="chart-container-2">Loading Tab 2 Chart...</div>
</body>
</html>

在这个例子中，我们有两个选项卡，每个选项卡点击时通过Ajax异步请求服务器获取图表，并将返回的图表HTML内容插入到对应的容器中。这样，用户点击不同的选项卡时，就可以看到对应的图表信息，而不需要刷新页面。

flask+Pyecharts+ajax实现分tab页展示多图

评论已关闭

推荐阅读