在MySQL中创建数据表，使用python连接数据库，Ajax实现数据获取，Flask框架做web后台，最后使用Echarts进行可视化。
数据表如图一所示： （操作数据可以使用navicat）
图一
工程目录结构如图二所示：
图二
使用的python第三方库有：
from flask import Flask,render_template,url_for
import pymysql
import json
web.py源代码如下：
app = Flask(__name__)
@app.route('/')
def my_tem():
#在浏览器上渲染my_templaces.html模板
return render_template('my_template.html')
@app.route('/test',methods=['POST'])
def my_test():
#创建连接数据库
connection = pymysql.connect(host='localhost',
user='root',
passwd='123456',
db='data',
port=3306,
charset='utf8'
)
cur=connection.cursor()#游标（指针）cursor的方式操作数据
sql='SELECT movie,score FROM tb1_movie_score' #sql语句
cur.execute(sql)#execute(query, args):执行单条sql语句。
see=cur.fetchall()#使结果全部可看
#print(sql)
#print(see)
#print(cur)
#创建json数据
xdays=[]
jsonData={}
yvalues=[]
for datain see:
xdays.append(data[0])
yvalues.append(data[1])
#print(xdays)
#print(yvalues)
jsonData['xdays']=xdays
jsonData['yvalues']=yvalues
#print(jsonData)
#将json格式转成str，因为如果直接将dict类型的数据写入json会发生报错，因此将数据写入时需要用到该函数。
j=json.dumps(jsonData)
#print(j)
cur.close()
connection.close()
#渲染html模板
return (j)
if __name__ =="__main__":
#运行项目
#my_test() #测试
app.run(host='127.0.0.1',debug =True)#整个项目的运行
my_template.html代码如下：
<!DOCTYPE html>
<meta charset="utf-8">
<title>ECharts
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js">
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js">
<div id="main" style="width:600px;height:400px;">
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart =echarts.init(document.getElementById('main'));
//建立axjx所需的json数据
var app={
xday:[],
yvalue:[]
};
//发送ajax请求
$(document).ready(function () {
getData();
console.log(app.xday);
console.log(app.yvalue)
});
//设计画图
function getData() {
$.ajax({
//渲染的是127.0.0.1/test 下的json数据
url:'/test',
data:{},
type:'POST',
async:false,
dataType:'json',
success:function(data) {
app.xday = data.xdays;
app.yvalue = data.yvalues;
myChart.setOption({
title: {
text:'电影评分总数'
},
tooltip: {},
legend: {
data:['评分']
},
xAxis: {
data: app.xday
},
yAxis: {},
//
series: [{
name:'评分',
type:'bar',
data: app.yvalue
}]
})
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
}
运行web.py代码，如图三所示：
图三
点击连接即可访问站点，如图四所示：
图四
更改MySQL中的数据，如图五所示：
图五
刷新网页即可展示最新数据，如图六所示：
图六
查看后台，可以看到访问的日志记录，如图七所示：
图七
网友评论