python flask pyecharts从网页上获取实时数据展现
时间: 2023-10-09 10:05:59 浏览: 110
Flask和pyecharts实现动态数据可视化
5星 · 资源好评率100%
要从网页上获取实时数据并展现在 Pyecharts 中,可以使用 Flask 应用程序作为 Web 服务器,利用 Ajax 技术从后台获取数据,然后使用 Pyecharts 生成图表并在前端展示。
以下是一个简单的示例代码:
```python
from flask import Flask, render_template, jsonify
from pyecharts.charts import Line
from pyecharts import options as opts
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data')
def get_data():
# 这里可以编写代码从网站上获取数据
x_data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
y_data = [820, 932, 901, 934, 1290, 1330, 1320]
return jsonify({'x': x_data, 'y': y_data})
@app.route('/chart')
def make_chart():
# 这里是生成图表的代码
line = Line()
line.add_xaxis([])
line.add_yaxis('', [])
line.set_global_opts(title_opts=opts.TitleOpts(title="实时数据展示"))
return line.dump_options_with_quotes()
if __name__ == '__main__':
app.run(debug=True)
```
在模板文件 `index.html` 中,可以使用 Ajax 技术从后台获取数据,并使用 Pyecharts 生成图表:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时数据展示</title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px;height:400px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
chart.showLoading();
$.ajax({
url: '/data',
type: 'GET',
dataType: 'json',
success: function (data) {
chart.hideLoading();
chart.setOption({
xAxis: {
data: data.x
},
series: [{
name: '',
type: 'line',
data: data.y
}]
});
}
});
</script>
</body>
</html>
```
通过访问 `/chart` 路由,可以获取生成图表的配置信息。最后在前端页面中使用 `echarts.init()` 初始化图表,并从后台获取数据并展示。
阅读全文