目录结构
目录结构.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中数据并利用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>学生分数柱形显示</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准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var stu_option = {
xAxis: {
type: 'category',
data: [],
axisLabel: {
interval:0, //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有 1：隔一个显示一个 :3：隔三个显示一个...
rotate:-20 //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
}
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'bar',
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
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>
然后运行app.py在浏览器上输入http://127.0.0.1:5000/
echarts.PNG
