Flask目录:https://www.jianshu.com/p/9b5e30320849
静态文件使用
app.py
------
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/tq')
def tq():
list1=[11, 11, 15, 13, 12, 13, 10]
list2=[1, -2, 2, 5, 3, 2, 0]
return render_template('tq.html',list1=list1,list2=list2)
if __name__ == '__main__':
app.run()
tq.html
-------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{{ url_for('static',filename='echarts.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 option = {
title: {
text: '未来一周气温变化'
},
tooltip: {},
legend: {},
toolbox: {},
xAxis: [{
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: { },
series: [{
name: '最高气温',
type: 'line',
data:{{ list1 }}
},
{
name: '最低气温',
type: 'line',
data: {{ list2 }}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//默认是合并原数据,加上true表示不合并配置,否则原数据依然存在图表上
//myChart.setOption(option, true);
</script>
</body>
</html>
截图
flask使用静态文件,只需要使用url_for函数即可。
<script src="{{ url_for('static',filename='echarts.js') }}"></script>
网友评论