目錄結(jié)構(gòu)
目錄結(jié)構(gòu).PNG
app.py代碼
from flask import Flask, render_template,jsonify
import pymysql
app = Flask(__name__)
conn = pymysql.connect(
host='127.0.0.1',
user='root',
password='密碼',
db='student',
charset='utf8'
)
@app.route('/')
def index():
return render_template("index.html")
# 讀取Mysql中數(shù)據(jù)并利用jsonify解析成json
@app.route('/stu')
def get_stu_data():
cur = conn.cursor()
sql="select name,number from stu_table"
cur.execute(sql)
studata = cur.fetchall()
conn.commit()
conn.close()
name = []
number = []
for a, b in studata:
name.append(a)
number.append(int(b))
return jsonify({"name": name, "number": number})
return content
if __name__ == '__main__':
app.run(debug=True)
index.html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>學(xué)生分?jǐn)?shù)柱形顯示</title>
<!-- 引入 echarts.js
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>-->
<script src="../static/js/echarts.min.js"></script>
<script src="../static/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var stu_option = {
xAxis: {
type: 'category',
data: [],
axisLabel: {
interval:0, //坐標(biāo)軸刻度標(biāo)簽的顯示間隔(在類(lèi)目軸中有效) 0:顯示所有 1：隔一個(gè)顯示一個(gè) :3：隔三個(gè)顯示一個(gè)...
rotate:-20 //標(biāo)簽傾斜的角度，顯示不全時(shí)可以通過(guò)旋轉(zhuǎn)防止標(biāo)簽重疊（-90到90）
}
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'bar',
itemStyle: {
normal: {
label: {
show: true, //開(kāi)啟顯示
position: 'top', //在上方顯示
textStyle: { //數(shù)值樣式
color: 'black',
fontSize: 16
}
}
}
}
}]
};
// 使用ajax 解析json。
myChart.setOption(stu_option);
function get_stu_data() {
$.ajax({
url: "/stu",
success: function (data) {
stu_option.xAxis.data=data.name;
stu_option.series[0].data=data.number;
myChart.setOption(stu_option);
}
})
}
get_stu_data()
</script>
</body>
</html>
然后運(yùn)行app.py在瀏覽器上輸入http://127.0.0.1:5000/
echarts.PNG
