首先，确保你已经安装了Flask、ECharts和Jinja2。
以下是一个简单的例子，展示了如何使用Flask、ECharts和AJAX来实现动态更新的散点图。
- 安装Flask和ECharts：
pip install Flask ECharts
- 创建Flask应用：
from flask import Flask, render_template, request, jsonify
from jinja2 import Markup
import echarts
app = Flask(__name__)
# 初始散点图数据
breastfeeding = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
bread = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
@app.route('/')
def index():
# 初始化散点图
scatter = echarts.Scatter()
scatter.add('Breastfeeding vs Bread', breastfeeding, bread)
scatter.set_global_opts(title_opts=echarts.opts.TitleOpts(title='Breastfeeding vs Bread'))
# 渲染图表到HTML
chart_html = scatter.render_notebook()
return render_template('index.html', chart_html=Markup(chart_html))
@app.route('/update_data', methods=['POST'])
def update_data():
# 假设这是一个新的数据更新逻辑
new_breastfeeding = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] # 用新数据更新
new_bread = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] # 用新数据更新
# 更新散点图数据
scatter = echarts.Scatter()
scatter.add('Breastfeeding vs Bread', new_breastfeeding, new_bread)
scatter.set_global_opts(title_opts=echarts.opts.TitleOpts(title='Breastfeeding vs Bread'))
# 渲染新的图表数据
chart_html = scatter.render_notebook()
return jsonify(chartHTML=Markup(chart_html))
if __name__ == '__main__':
app.run(debug=True)
- 创建Jinja2模板
templates/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Breastfeeding vs Bread</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
{{ chart_html.body() }}
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<button id="update">Update Data</button>
<script>
$(document).ready(function() {
$('#update').click(function() {
$.ajax({
url: '/update_data',
type: 'POST',
success: function(response) {
$('#main').html(response.chartHTML);
}
});
});
});
</script>
</body>
</html>
在这个例子中，当页面加载完成后，散点图会被渲染显示。点击"Update Data"按钮会通过AJAX请求调用/update_data路由，后端更新数据并返回新的图表HTML，然后前端使用这个HTML更新页面上的图表。这样，你就可以在不刷新页面的情况下更新图表。