在MySQL中創(chuàng)建數(shù)據(jù)表，使用python連接數(shù)據(jù)庫，Ajax實(shí)現(xiàn)數(shù)據(jù)獲取，F(xiàn)lask框架做web后臺(tái)，最后使用Echarts進(jìn)行可視化。
數(shù)據(jù)表如圖一所示：? ?（操作數(shù)據(jù)可以使用navicat）
工程目錄結(jié)構(gòu)如圖二所示：
使用的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():
#創(chuàng)建連接數(shù)據(jù)庫
? ? connection = pymysql.connect(host='localhost',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? user='root',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? passwd='123456',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? db='data',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? port=3306,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? charset='utf8'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )
cur=connection.cursor()#游標(biāo)（指針）cursor的方式操作數(shù)據(jù)
? ? sql='SELECT movie,score FROM tb1_movie_score' #sql語句
? ? cur.execute(sql)#execute(query, args):執(zhí)行單條sql語句。
? ? see=cur.fetchall()#使結(jié)果全部可看
#print(sql)
#print(see)
#print(cur)
#創(chuàng)建json數(shù)據(jù)
? ? 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格式轉(zhuǎn)成str，因?yàn)槿绻苯訉ict類型的數(shù)據(jù)寫入json會(huì)發(fā)生報(bào)錯(cuò)，因此將數(shù)據(jù)寫入時(shí)需要用到該函數(shù)。
? ? j=json.dumps(jsonData)
#print(j)
? ? cur.close()
connection.close()
#渲染html模板
? ? return (j)
if __name__ =="__main__":
#運(yùn)行項(xiàng)目
#my_test() #測試
? ? app.run(host='127.0.0.1',debug =True)#整個(gè)項(xiàng)目的運(yùn)行
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">
? ? ? ? // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
? ? ? ? var myChart =echarts.init(document.getElementById('main'));
? ? ? //建立axjx所需的json數(shù)據(jù)
? ? ? ? var app={
xday:[],
? ? ? ? ? ? yvalue:[]
};
? ? ? ? //發(fā)送ajax請求
? ? ? ? $(document).ready(function () {
getData();
? ? ? console.log(app.xday);
? ? ? console.log(app.yvalue)
});
? //設(shè)計(jì)畫圖
? ? function getData() {
$.ajax({
//渲染的是127.0.0.1/test 下的json數(shù)據(jù)
? ? ? ? ? ? url:'/test',
? ? ? ? ? ? data:{},
? ? ? ? ? ? type:'POST',
? ? ? ? ? ? async:false,
? ? ? ? ? ? dataType:'json',
? ? ? ? ? ? success:function(data) {
app.xday = data.xdays;
? ? ? ? ? ? ? ? app.yvalue = data.yvalues;
? ? ? ? ? ? ? ? myChart.setOption({
title: {
text:'電影評分總數(shù)'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? tooltip: {},
? ? ? ? ? ? ? ? ? ? legend: {
data:['評分']
},
? ? ? ? ? ? ? ? ? ? xAxis: {
data: app.xday
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? yAxis: {},
? ? ? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? ? ? series: [{
name:'評分',
? ? ? ? ? ? ? ? ? ? ? ? type:'bar',
? ? ? ? ? ? ? ? ? ? ? ? data: app.yvalue
? ? ? ? ? ? ? ? ? ? }]
})
},
? ? ? ? ? ? error:function (msg) {
console.log(msg);
? ? ? ? ? ? ? ? alert('系統(tǒng)發(fā)生錯(cuò)誤');
? ? ? ? ? ? }
})
}
運(yùn)行web.py代碼，如圖三所示：
點(diǎn)擊連接即可訪問站點(diǎn)，如圖四所示：
更改MySQL中的數(shù)據(jù)，如圖五所示：
刷新網(wǎng)頁即可展示最新數(shù)據(jù)，如圖六所示：
查看后臺(tái)，可以看到訪問的日志記錄，如圖七所示：
