flask+Pyecharts+ajax实现分tab页展示多图
以下是一个使用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内容插入到对应的容器中。这样，用户点击不同的选项卡时，就可以看到对应的图表信息，而不需要刷新页面。
评论已关闭