1.准备工作,在echarts官网下载好echart,准备好mysql数据库,可以在excel把自己所准备的数据准备好,导入mysql当中.我的数据来源于国家数据网,你也可以自己定做数据来显示,你可以更具需要做各种图形.
2.在pycharm中,导入好所需模块Flask,Flask-SQLAlchemy,pymysql
3.准备好数据库文件
4.准备写入所需代码
from flask import Flask,render_template #导入模块
from flask_sqlalchemy import SQLAlchemy**
app = Flask(name)
连接数据库
app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘mysql+pymysql://root:你的密码@127.0.0.1:3306/test’ #数据库名为test
app.config[‘SQLALCHEMY_TRACK_MODIFICATIONS’] = False
创建数据库操作
db = SQLAlchemy(app)
定义表
class Cultural(db.Model):
tablename = ‘cultural’ #数据表
year2018= db.Column(db.String(255), primary_key = True)
year2017= db.Column(db.String(255))
year2016 = db.Column(db.String(255))
year2015 = db.Column(db.String(255))
year2014 = db.Column(db.String(255))
激活数据库
db.create_all()
@app.route(’/’) #使用route告诉返回什么样的URL来显示
def hello_world():
cultural = Cultural.query.all()
for i in cultural:
print(i.year2018)
return render_template(‘dark.html’, cultural=cultural)
if name == ‘main’:
app.run() # run运行在本地服务器上
4.创建templates包,在当中写入你的html显示化页面,下面是我的htm,有x和y坐标,由于数据相差太大,我做了阴影部分可以展现我的数据出来,其实可以做饼图效果更好.
<script>
var year2018= [{% for i in cultural %}'{{i.year2018 }}',{% endfor %}]
var year2017= [{% for i in cultural%}'{{i.year2017}}',{% endfor %}]
var year2016 = [{% for i in cultural %}'{{i.year2016}}',{% endfor %}]
var year2015= [{% for i in cultural %}'{{i.year2015 }}',{% endfor %}]
var year2014 = [{% for i in cultural %}'{{i.year2014 }}',{% endfor %}]
var line = echarts.init (document.getElementById('cultural'))
Option = {
title: {
text:'文化'
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow',
interval:0
}
},
legend: {data: ['2018年', '2017年',"2016年","2015年","2014年"]
},
grid: {
left: '6%',
right: '6%',
bottom: '8%',
},
xAxis : [
{
type:'category',
data:["生产电影(部)","博物馆(个)","有线电视用户","艺术表演团体","各类期刊总印数(亿)","生产动漫电影(部)","生产科教电影(部)"
,"生产记录电影(部)","图书出版(种)","特种电影(部)"],
interval: 0,
}
],
yAxis : [
{
type : 'value'
}
],
series:[
{name:'2018年',
type:'bar',
data:year2018
},
{
name:'2017年',
type:'bar',
data:year2017
},
{
name:'2016年',
type:'bar',
data:year2016
},
{
name:'2015年',
type:'bar',
data:year2015
},
{
name:'2014年',
type:'bar',
data:year2014
},
]
};
line.setOption(lineOption)
</script>
5.我的数据来自国家统计局,运行代码我做的柱状图和折线图,你可以更具喜欢在echart官网做自己喜欢的案列图形.