Flask+echarts可视化未来一周天气变化情况

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41338249/article/details/86549670

Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后触发Flask框架,开发人员基于Flask框架提供的功能对请求进行相应的处理,并返回给用户,如果要返回给用户复杂的内容时,需要借助jinja2模板来实现对模板的处理,即:将模板和数据进行渲染,将渲染后的字符串返回给用户浏览器。

“微”(micro) 并不表示你需要把整个 Web 应用塞进单个 Python 文件(虽然确实可以 ),也不意味着 Flask 在功能上有所欠缺。微框架中的“微”意味着 Flask 旨在保持核心简单而易于扩展。Flask 不会替你做出太多决策——比如使用何种数据库。而那些 Flask 所选择的——比如使用何种模板引擎——则很容易替换。除此之外的一切都由可由你掌握。如此,Flask 可以与您珠联璧合。

默认情况下,Flask 不包含数据库抽象层、表单验证,或是其它任何已有多种库可以胜任的功能。然而,Flask 支持用扩展来给应用添加这些功能,如同是 Flask 本身实现的一样。众多的扩展提供了数据库集成、表单验证、上传处理、各种各样的开放认证技术等功能。Flask 也许是“微小”的,但它已准备好在需求繁杂的生产环境中投入使用。

 

echarts一个开源的可视化图标工具

https://echarts.baidu.com/index.html

 

后台代码如下所示:

from  flask import Flask,render_template
from flask_sqlalchemy import SQLAlchemy

app=Flask(__name__)
class Config(object):
    SQLALCHEMY_DATABASE_URI="mysql://root:123456@127.0.0.1:3306/author_book_py4"
    SQLALCHEMY_TRACK_MODIFICATIONS=True
app.config.from_object(Config)
db=SQLAlchemy(app)
class Temperature(db.Model):
    __tablename__="tbl_temperature"
    id=db.Column(db.Integer,primary_key=True)
    day=db.Column(db.String(64),unique=True)
    high_temperature=db.Column(db.Integer)
    lower_temperature=db.Column(db.Integer)
@app.route("/")
def index():
    #查询数据库
    temperature_list=Temperature.query.all()
    return render_template("temperature.html",temperature=temperature_list)

if __name__ == '__main__':
    db.drop_all()
    db.create_all()
    t1=Temperature(day="周日",high_temperature=7,lower_temperature=-2)
    t2=Temperature(day="周一",high_temperature=8,lower_temperature=-1)
    t3=Temperature(day="周二",high_temperature=8,lower_temperature=0)
    t4=Temperature(day="周三",high_temperature=11,lower_temperature=1)
    t5=Temperature(day="周四",high_temperature=10,lower_temperature=3)
    t6=Temperature(day="周五",high_temperature=9,lower_temperature=2)
    t7=Temperature(day="周六",high_temperature=10,lower_temperature=1)
    db.session.add_all([t1,t2,t3,t4,t5,t6,t7])
    db.session.commit()
    app.run(debug=True)

前端代码如下所示:

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="../static/echarts%20.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var data1=[{% for item in temperature%}'{{item.day}}',{% endfor %}];
var data2=[{% for item in temperature%}{{item.high_temperature}},{% endfor %}];
var data3=[{% for item in temperature%}{{item.lower_temperature}},{% endfor %}];
option = null;
option = {
    title: {
        text: '未来一周气温变化',
        subtext: '数据来自中国天气预报'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: data1
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name:'最高气温',
            type:'line',
            data:data2,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:data3,
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

运行效果如下所示:

展开阅读全文

没有更多推荐了,返回首页