flask+mysql+echarts实现数据可视化
flask+mysql+echarts实现数据可视化
在⾏业中，flask也被称为微框架，因为flask使⽤简单的核⼼操作，通过extension增加额外的功能，并且flask没有默认的数据库和表单验证等⽀持。
1. 使⽤pycharm新建⼀个Flask项⽬
2. 数据库结构
3. 读取数据库数据
1. data.py
import pymysql
mysql下载app
def get_loan_number():
connect = pymysql.Connect(
host="数据库",
port=3306,
user="root",
passwd="000000",
db="student",
charset='utf8'
)
print("---读取数据---")
cursor = connect.cursor()  # 使⽤连接对象获得⼀个cursor对象
sql = "select course,grade  from sys_grade"
number = cursor.fetchall()  # 返回多个元组，即返回多个记录(rows)，如果没有结果则返回 ()    temp_data = []
loan_count = 0
for loanNumber in number:
loan_count += 1
temp_data.append(loanNumber)
data11 = dict(temp_data)
# print(data11)
cursor.close()
connect.close()
print("读取完成，共有%d条数据……" % loan_count)
return data11
4. 通过链接: 下载模板，这⾥我们弄⼀个简单的柱形图就可以了
5. 编写主程序，绑定视图函数
app.py
# 引⼊核⼼模块
from flask import Flask, render_template
from data import get_loan_number
# 通过当前⽂件构建⼀个app应⽤，当前⽂件就是web和App的⼊⼝
app = Flask(__name__)
# 定义视图处理函数加载到App中（路由+视图函数）
@ute('/') # 访问路由
def hello_world(): # 绑定的视图函数
temp_data = get_loan_number()
return render_template('bar-simple.html',map_data=temp_data)
if __name__ == '__main__':
app.run()
5.我们要把echarts下载的⽂件放在template⽂件夹⾥⾯
我们接下来要做的就是将html⾥⾯的数据更换成数据库⾥⾯的，因为上⾯data.py⾥⾯已经获取到数据了，通过app.py已经绑定了视图函数，所以现在我们就直接⽤{% %}这个⽅法将数据传到html中，这样我们的数据就可以实现可视化了。
代码如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
</head>
<body >
<div id="container" ></div>
<script type="text/javascript" src="cdn.jsdelivr/npm/echarts@5/dist/echarts.min.js"></script
>
<script type="text/javascript">
var dom = ElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
xAxis: {
type: 'category',
data: [{% for key in map_data %}
'{{ key}}',
{% endfor %}
]
},
yAxis: {
type: 'value'
},
series: [{
data: [{% for key in map_data %}
'{{ map_data[key] }}',
{% endfor %}
],
type: 'bar'
}]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
将获取的值在html中直接遍历。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。