flask＋echarts制作数据大屏

最新推荐文章于 2025-05-13 17:22:05 发布

企鹅战神

最新推荐文章于 2025-05-13 17:22:05 发布

阅读量328

点赞数 5

CC 4.0 BY-SA版权

文章标签： flask echarts python

本文链接：https://blog.youkuaiyun.com/zhangguanghao9/article/details/143907902

Flask和ECharts可以很好地配合使用来制作数据大屏。以下是一个简单的示例：

1. 安装Flask和ECharts

首先需要安装Flask和ECharts：

```
$ pip install flask
$ pip install pyecharts
```

2. 创建Flask应用

创建一个名为app.py的Python文件，用于创建Flask应用：

```python
from flask import Flask, render_template
from pyecharts import options as opts
from pyecharts.charts import Bar

app = Flask(__name__)

@app.route('/')
def index():
return render_template('index.html')

@app.route('/data')
def data():
# 生成数据
x_data = ['A', 'B', 'C', 'D', 'E']
y_data = [5, 20, 36, 10, 75]

# 创建柱状图
bar = (
Bar()
.add_xaxis(x_data)
.add_yaxis('data', y_data)
)

# 渲染图表
return bar.dump_options_with_quotes()

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

3. 创建模板文件

在Flask应用的根目录下创建一个名为templates的文件夹，并在该文件夹下创建一个名为index.html的模板文件：

```html
<!DOCTYPE html>
<html>
<head>
<title>Data Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 使用Ajax请求数据
var xhr = new XMLHttpRequest();
xhr.open('GET', '/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var options = JSON.parse(xhr.responseText);
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(options);
}
};
xhr.send();
</script>
</body>
</html>

制作不易,请点赞加关注