python flask+pyecharts实现数据大屏
时间: 2023-11-04 13:06:03 浏览: 253
基于echarts数据大屏
1. 安装Flask和pyecharts
首先,我们需要安装Flask和pyecharts。可以使用以下命令安装:
```
pip install Flask
pip install pyecharts
```
2. 创建Flask应用
创建一个新的Flask应用,创建app.py文件并添加以下代码:
```
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")
if __name__ == "__main__":
app.run()
```
这将创建一个基本的Flask应用,并在根路径上显示index.html模板。
3. 创建pyecharts图表
接下来,我们将创建一个pyecharts图表并将其添加到index.html页面中。我们将创建一个简单的柱形图来显示一些示例数据。在app.py文件中添加以下代码:
```
@app.route("/chart")
def chart():
bar = (
Bar()
.add_xaxis(["A", "B", "C", "D", "E"])
.add_yaxis("Series 1", [5, 20, 36, 10, 75])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar Chart"))
)
return render_template("chart.html", chart=bar.render_embed())
if __name__ == "__main__":
app.run()
```
这将创建一个名为“chart”的路由,该路由将呈现一个简单的柱形图。我们还使用render_embed()方法将图表嵌入到HTML页面中。
4. 创建HTML模板
最后,我们需要创建HTML模板来呈现我们的数据大屏幕。在项目根目录下创建一个名为“templates”的文件夹,并在其中创建两个名为“index.html”和“chart.html”的文件。
在index.html文件中添加以下代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Flask + pyecharts Data Dashboard</title>
</head>
<body>
<h1>Welcome to the Data Dashboard</h1>
<a href="/chart">View Chart</a>
</body>
</html>
```
这将显示一个欢迎消息和一个链接,该链接将导航到我们刚刚创建的名为“chart”的路由。
在chart.html文件中添加以下代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Flask + pyecharts Data Dashboard</title>
<script src="https://cdn.bootcss.com/echarts/4.7.0-rc.1/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
{{ chart|safe }}
</body>
</html>
```
这将在页面上显示图表,并使用Flask渲染器呈现我们在app.py中创建的图表。
5. 运行应用程序
现在我们已经准备好运行我们的应用程序了。在命令行中,导航到项目目录并运行以下命令:
```
python app.py
```
这将启动我们的Flask应用程序。现在,我们可以在浏览器中打开http://localhost:5000/并查看我们的数据大屏幕了。点击“View Chart”链接将带您到我们的示例柱形图。
阅读全文