这个案例简单的实现了Flask框架的原理，运用python中的Flask框架从数据库中提取数据，前端页面运用echarts渲染
后端代码:
from flask import Flask,render_template
from flask_sqlalchemy import SQLAlchemy
#创建Flask应用对象
#__name__表示当前模块的名字
app=Flask(__name__) #访问静态资源的url前缀 静态文件的目录 默认为static模板文件的目录
class Config(object):
#sqlalchemy的配置参数
SQLALCHEMY_DATABASE_URI="mysql://root:[email protected]:3306/sales"
SQLALCHEMY_TRACK_MODIFICATIONS=True
app.config.from_object(Config)
db=SQLAlchemy(app)
class Sales(db.Model):
__tablename__="tbl_sales"
days=db.Column(db.String(64),primary_key=True,nullable=True)
e_mail=db.Column(db.Integer,nullable=True)
league=db.Column(db.Integer,nullable=True)
video=db.Column(db.Integer,nullable=True)
visit=db.Column(db.Integer,nullable=True)
search=db.Column(db.Integer,nullable=True)
@app.route("/")
def index():
#查询数据库
sales_list=Sales.query.all()
return render_template("sales.html",sales=sales_list)
if __name__ == '__main__':
db.drop_all()
db.create_all()
s1=Sales(days="周一",e_mail=120,league=220,video=150,visit=320,search=820)
s2=Sales(days="周二",e_mail=132,league=182,video=232,visit=332,search=932)
s3=Sales(days="周三",e_mail=101,league=191,video=201,visit=301,search=901)
s4=Sales(days="周四",e_mail=134,league=234,video=154,visit=334,search=934)
s5=Sales(days="周五",e_mail=90,league=290,video=190,visit=390,search=1290)
s6=Sales(days="周六",e_mail=230,league=330,video=330,visit=330,search=1330)
s7=Sales(days="周日",e_mail=210,league=310,video=410,visit=320,search=1320)
db.session.add_all([s1,s2,s3,s4,s5,s6,s7])
db.session.commit()
app.run(debug=True)
前端代码:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
</head>
<body style="height: 100%;margin: 0">
<div id="container" style="height: 100%;"></div>
<script type="text/javascript" src="../static/echarts%20.js"></script>
<script type="text/javascript">
var dom=document.getElementById("container");
var myChart=echarts.init(dom)
var app={};
//存储日期
var data1=[{% for item in sales %}'{{item.days}}',{% endfor %}];
//邮件直销的数量
var data2=[{% for item in sales %}{{item.e_mail}},{% endfor %}];
//联盟广告数量
var data3=[{% for item in sales %}{{item.league}},{% endfor %}];
//视频广告数量
var data4=[{% for item in sales %}{{item.video}},{% endfor %}];
//直接访问数量
var data5=[{% for item in sales %}{{item.visit}},{% endfor %}];
//搜索引擎数量
var data6=[{% for item in sales %}{{item.search}},{% endfor %}];
option=null;
option={
title:{
text:'折线图堆叠'
},
tooltip:{
trigger:'axis'
},
legend:{
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
toolbox:{
feature:{
saveAsImage:{}
}
},
xAxis:{
type:'category',
boundaryGap:false,
data:data1
},
yAxis:{
type:'value'
},
series:[{
name:'邮件营销',
type:'line',
stack:'总量',
data:data2
},{
name:'联盟广告',
type:'line',
stack:'总量',
data:data3
},{
name:'视频广告',
type:'line',
stack:'总量',
data:data4
},{
name:'直接访问',
type:'line',
stack:'总量',
data:data5
},{
name:'搜索引擎',
type:'line',
stack:'总量',
data:data6
}]
};;
if(option && typeof option ==="object"){
myChart.setOption(option)
}
</script>
</body>
</html>效果如下:
