案例解析
基础数据
上节课我们分析出来的三国人物的频次的分析的结果是:
role_name = ["孔明", "玄德", "曹操", "云长", "张飞", "孙权",
"吕布", "赵云", "司马懿", "孔明","周瑜"]
counts = [1204, 1159, 910, 749, 340, 259, 258, 254, 221, 216]
更改app.py
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def shou_line():
role_name = ["孔明", "玄德", "曹操", "云长", "张飞",
"孙权", "吕布", "赵云", "司马懿", "孔明","周瑜"]
counts = [1204, 1159, 910, 749, 340, 259, 258, 254, 221, 216]
return render_template('bar.html', role_name=role_name, counts=counts)
if __name__ == '__main__':
app.run()
更改bar.html
- 首先修改echarts引入文件
和之前引入js的方式不同，Jinja2引入js文件使用url_for的方式
- 静态文件引入：{{ url_for('static', filename='文件路径') }}
- 定义路由：{{ url_for('模块名.视图名'，变量=参数) }}
- 定义数据块：{% block 数据块名称 %}...{% endblock %}
- 继承模板：{% extends "home/home.html" %}
- 包含模板： {% include "home/menu.html" %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
</head>
</html>
- 使用Jinjia2模板语法修改bar.html的数据值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
</head>
<body>
<div id="main" style=" width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 标题
title: {
text: '三国演义出场频次展示'
},
// 工具箱
toolbox: {
show: true,
feature: {
dataView:{
show:true
},
restore:{
show:true
},
dataZoom:{
show:true
},
saveAsImage: {
show: true
},
magicType: {
type: ['line', 'bar']
}
}
},
// 图例
legend: {
data: ['三国演义出场频次展示']
},
// x轴
xAxis: {
data:{{ role_name|tojson }}
},
yAxis: {},
// 数据
series: [{
name: '三国演义出场频次展示',
type: 'bar',
data: {{ counts|tojson }},
itemStyle:{
normal:{
color:'#5CACEE'
}
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
运行app.run()文件
访问http://127.0.0.1:5000/漂酿的结果展示出来了
