需要导入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>
效果图
