美文网首页
2.8.6Flask --4 Flask的静态文件

2.8.6Flask --4 Flask的静态文件

作者: 寒暄_HX | 来源:发表于2020-03-09 16:49 被阅读0次

    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>

    相关文章

      网友评论

          本文标题:2.8.6Flask --4 Flask的静态文件

          本文链接:https://www.haomeiwen.com/subject/paaudhtx.html