这个案例简单的实现了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:123456@127.0.0.1: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)

前端代码:

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)

}

效果如下: