Flask+Echarts+Ajax：异步加载数据并可视化展示

最新推荐文章于 2023-05-03 17:56:48 发布

忌颓废

最新推荐文章于 2023-05-03 17:56:48 发布

阅读量1.5k

点赞数

分类专栏：数据可视化文章标签： ajax 可视化 flask

本文链接：https://blog.csdn.net/weixin_44947339/article/details/104583783

版权

数据可视化专栏收录该内容

12 篇文章 3 订阅

订阅专栏

阅读目录

效果

看效果图：http://127.0.0.1:5111/lineAjax
在这里插入图片描述

看json数据：http://127.0.0.1:5111/lineApi
在这里插入图片描述

项目目录

在这里插入图片描述

Flask_Echarts_Ajax.py

from flask import Flask
from flask import redirect,render_template,jsonify

app = Flask(__name__)
# http://127.0.0.1:5111/重定向到http://127.0.0.1:5111/lineAjax
@app.route('/')
def hello_world():
    return redirect('lineAjax')
    
#接收前端web页面的点击请求，如果是下面路由，则返回lineAjax.html
@app.route('/lineAjax')
def list_get_flask():
    return render_template('lineAjax.html')

#接收前端web页面的点击请求，如果是下面路由，返回以下内容   
@app.route('/lineApi')
def list_get_api():
    return jsonify({
    "xData":["周一","周二","周三","周四","周五","周六","周日"],
    "yDataHight":[11, 11, 15, 13, 12, 13, 10],
	"yDataLow":[1, -2, 2, 5, 3, 2, 0]
})
if __name__=='__main__':
    app.run(debug=True,port=5111,host='127.0.0.1')

Flask：redirect()函数
重定向：就比如上面，你输入http://127.0.0.1:5111/但是页面会显示http://127.0.0.1:5111/lineAjax的内容，这就是重定向。

lineAjax.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一周的天气</title>
    <style type="text/css">
        #main{height:400px;width: 700px;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript">
        require.config({
            paths:{
                echarts:'https://echarts.baidu.com/build/dist'
            }});
        require(
            ['echarts', 'echarts/chart/line'],//导入折线图
            function(ec){
                var myChart=ec.init(document.getElementById('main'));

                var option={
                    title:{
                        text:"未来一周的气温变化",
                        subtext:"纯属虚构"
                    },
                    tooltip:{
                        trigger:'axis'
                    },
                    legend:{
                        data:['最高气温','最低气温']
                    },
                    xAxis:{
                        type:'category',
                        data:[]
                    },
                    yAxis:{
                        type:'value'
                    },
                    series:[
                        {
                            name:'最高气温',
                            type:'line',
                            data:[]
                        },
                        {
                            name:'最低气温',
                            type:'line',
                            data:[]
                        }
                    ]
                    };
                $.ajax({
                    type:"GET",
                    url:"lineApi",
                    dataType:"json",
                    success:function (data){
                        console.log(data);
                        option['xAxis']['data']=data['xData'];
                        option['series'][0]['data']=data['yDataHight'];
                        option['series'][1]['data']=data['yDataLow'];
                        myChart.setOption(option);
                        }
                });

            }
           )
    </script>
</body>
</html>

忌颓废

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Flask+Echarts+Ajax：异步加载数据并可视化展示

先看效果：http://127.0.0.1:5111/lineAjaxjson数据：http://127.0.0.1:5111/lineApi项目目录Flask_Echarts_Ajax.pyfrom flask import Flaskfrom flask import redirect,render_template,jsonifyapp = Flask(__name__)...
复制链接

扫一扫