需要导入echarts.min.js
app.py代码如下
@app.route('/score')
def score():
score = [] # 评分
num = [] # 每个评分统计出的电影数量
conn = sqlite3.connect("movie.db")
cur = conn.cursor()
sql = " select score,count(score) from movie250 group by score"
data = cur.execute(sql)
for item in data:
score.append(item[0])
num.append(item[1])
cur.close()
conn.close()
return render_template("score.html",score=score,num=num)
score.html 代码如下
<div id="main" style="width: 1000px;height:400px;"></div><!--这里的id对象下面的script中的document.getElementById("main"); -->
</div>
<script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: '电影评分表'
},
color:['#3398db'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
xAxis: {
type: 'category',
data: {{ score|tojson }}
},
yAxis: {
type: 'value'
},
series: [{
data: {{ num }},
barWidth:'30%',
type: 'bar',
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
效果图