python flask+多个pyecharts图实现数据大屏
时间: 2023-11-04 21:06:02 浏览: 89
Flask和pyecharts实现动态数据可视化
5星 · 资源好评率100%
1.安装Flask和pyecharts
在命令行中输入以下命令:
```
pip install flask
pip install pyecharts
```
2.创建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')
@app.route('/bar')
def get_bar():
bar = Bar()
bar.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
bar.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
bar.add_yaxis("商家B", [15, 6, 45, 20, 35, 66])
bar.set_global_opts(title_opts=opts.TitleOpts(title="柱状图示例"))
return bar.dump_options_with_quotes()
if __name__ == '__main__':
app.run(debug=True)
```
这里我们在Flask应用程序中定义了两个路由,一个是首页,一个是柱状图路由,其中柱状图路由返回了一个pyecharts柱状图的JSON数据,这里我们使用了dump_options_with_quotes()方法将pyecharts图表对象转换为JSON格式的字符串。
3.创建HTML模板
在项目文件夹中创建templates文件夹,并在其中创建index.html文件,输入以下代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据大屏</title>
</head>
<body>
<div id="bar" style="width:600px;height:400px;"></div>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
var myChart = echarts.init(document.getElementById('bar'));
$.get('/bar', function (data) {
myChart.setOption(JSON.parse(data));
});
});
</script>
</body>
</html>
```
这里我们在HTML中定义了一个div元素,用于显示柱状图,同时引入了echarts和jquery库,并使用jquery的get()方法获取柱状图的JSON数据,使用echarts的setOption()方法将JSON数据转换为图表。
4.运行应用程序
在命令行中进入项目文件夹,输入以下命令启动应用程序:
```
python app.py
```
然后在浏览器中输入http://127.0.0.1:5000/,即可看到Flask应用程序的首页,点击柱状图链接,即可看到pyecharts柱状图。如果需要添加其他pyecharts图表,只需在Flask应用程序中定义新的路由,返回相应的JSON数据即可。
阅读全文