echarts+flask+mysql 从mysql 数据库中检索数据,进行异步报表展示
说明
从mysql数据库中检索出数据,通过echarts 在html中进行展示。选择语言python。
实验来源:
静态Echarts
首先接触的是echarts, 可以在echarts官网中进行学习查看,根据官网给出的样例,上手一个BI展示真的不过几分钟而已,当然这是静态数据的展示,数据是写死在html代码脚本中的。只要将如下代码保存为html文件,使用浏览器打开即可展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title : {
text: '人流量统计',
subtext: '2019',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['男','女']
},
series : [
{
name: '性别',
type: 'pie',
radius : '55%',
center: ['40%', '60%'],
data:[
{value:44, name:'男'},
{value:17, name:'女'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color: ['rgb(131,175,155)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)',]
};
myChart.setOption(option);//setOption方法生成一个简单的饼状图
</script>
</body>
</html>
异步Echarts
然后,想要尝试数据和图表的解藕,官网也是支持异步刷新操作的,代码如下,将BI中数据的获取,写在函数fetData里面,让后建立一个空的图表,最后把数据填进去。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
function fetchData(cb) {
// 通过 setTimeout 模拟异步加载
setTimeout(function () {
cb({
datamale: 44,
datafemale: 10
});
});
}
option = {
title : {
text: '人流量统计',
subtext: '2019',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['男','女']
},
series : [
{
name: '性别',
type: 'pie',
radius : '55%',
center: ['40%', '60%'],
data:[
{value:[], name:'男'},
{value:[], name:'女'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color: ['rgb(131,175,155)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)',]
};
fetchData(function (data) {
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
name: '性别',
data: [
{value:data.datamale, name:'男'},
{value:data.datafemale, name:'女'}
]
},]
});
});
myChart.setOption(option);//setOption方法生成一个简单的饼状图
</script>
</body>
</html>
Flask
在编程语言上选择了python,而python可以支持的echarts框架有flask 和dingo选择,由于flask的灵活性最终选择了flask。在pycharm开发环境中新建flask文件,目录结构为如下所示
三个文件:
1. echarts.min.js需要在Echarts官网进行下载,在目录static下
2. people_flow.html 在目录templates 下
3. getHistoryPeopleFlow.py在目录FlaskDemo下。
people_flow.html代码详情如下所示:从数据库中得到的数据为{{ male_num }}和{{female_num }},(数据取得过程参考下面getHistoryPeopleFlow.py的python代码), 需要用两个大括号才能得到其中的值,参见flask官方文档。
特别注意,Echarts的引用写成<script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
function fetchData(cb) {
// 通过 setTimeout 模拟异步加载
setTimeout(function () {
cb({
datamale: {{ male_num }},
datafemale: {{ female_num }}
});
});
}
option = {
title : {
text: '人流量统计',
subtext: '2019',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['男','女']
},
series : [
{
name: '性别',
type: 'pie',
radius : '55%',
center: ['40%', '60%'],
data:[
{value:[], name:'男'},
{value:[], name:'女'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color: ['rgb(131,175,155)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)',]
};
fetchData(function (data) {
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
name: '性别',
data: [
{value:data.datamale, name:'男'},
{value:data.datafemale, name:'女'}
]
},]
});
});
myChart.setOption(option);//setOption方法生成一个简单的饼状图
</script>
</body>
</html>
getHistoryPeopleFlow.py代码详情如下,特别注意是把从数据库里得到的数据,在return函数中进行传递
#coding:utf-8
from flask import Flask,render_template,url_for
import pymysql
import json
# 生成Flask实例
app = Flask(__name__)
@app.route("/")
def my_echart():
# 连接数据库,***的位置需要根据自己的数据库信息进行填写
conn = pymysql.connect(host='***',user='***',password='***',db='***')
cur = conn.cursor()
sqlmale=' SELECT count(*) FROM *** '# 男
sqlfemale = ' SELECT count(*) FROM ***' # 女
cur.execute(sqlmale)
maleresult = cur.fetchall()
cur.execute(sqlfemale)
femaleresult = cur.fetchall()
male_num = maleresult[0][0]
female_num = femaleresult[0][0]
cur.close()
conn.close()
# 在浏览器上渲染people_flow.html(为了查看输出的数据)
return render_template('people_flow.html', male_num=male_num,
female_num=female_num)
if __name__ == '__main__':
app.run(debug=True)
在pycharm中选择getHistoryPeopleFlow.py运行,即可输出
点击网址链接即可进行展示