flask数据用ECharts图表形式展现

最新推荐文章于 2024-08-03 13:41:47 发布

Kirk-Chen

最新推荐文章于 2024-08-03 13:41:47 发布

阅读量1.7k

点赞数

分类专栏： Python Web开发

Python Web开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

转载自 https://blog.csdn.net/u013055678/article/details/74898051

一个flask后台发送数据，一个前端ajax接收数据并用echarts图表展示

test.html

[html]view plain copy
<html>  
    <head>  
        <!-- 引入 echarts.js -->  
        <script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.js"></script>  
        <!-- 引入jquery.js -->  
        <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>  
    </head>  
    <body>  
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
        <div id="main" style="width: 900px;height:500px;"></div>  
    </body>  
    <script type="text/javascript">  
        var a = echarts;  
        var myChart = a.init(document.getElementById('main'));  
         // 显示标题，图例和空的坐标轴  
         myChart.setOption({  
             title: {  
                 text: '爬虫今日抓取数据图'  
             },  
             tooltip : {  
            trigger: 'axis'  
            },  
            legend: {  
                data:['今日数据']  
            },  
            toolbox: {  
                show : true,  
                feature : {  
                    mark : {show: true},  
                    dataView : {show: true, readOnly: false},  
                    magicType : {show: true, type: ['line', 'bar']},  
                    // restore : {show: true},  
                    // saveAsImage : {show: true}  
                }  
            },  
            calculable : true,  
  
             xAxis : [  
                {  
                    type : 'category',  
                    boundaryGap : false,  
                    data : []  
                }  
            ],  
             yAxis : [  
                {  
                    type : 'value',  
                    axisLabel : {  
                        formatter: '{value}'  
                    }  
                }  
            ],  
             series : [  
                {  
                    name:'最多数量',  
                    type:'line',  
                    data:[],  
                    markPoint : {  
                        data : [  
                            {type : 'max', name: '最大值'},  
                            {type : 'min', name: '最小值'}  
                        ]  
                    },  
                    markLine : {  
                        data : [  
                            {type : 'average', name: '平均值'}  
                        ]  
                    }  
                },]  
         });  
         myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画  
         var names=[];    //名称数组（实际用来盛放X轴坐标值）  
         var nums=[];    //数量数组（实际用来盛放Y坐标值）  
         $.ajax({  
         type : "get",  
//       async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）  
         url : "http://127.0.0.1:5000/echarts",    //请求发送到Servlet处  
//       data : {},  
         dataType : "json",        //返回数据形式为json  
         success : function(result) {  
             //请求成功时执行该函数内容，result即为服务器返回的json对象  
             if (result) {  
//              alert(result["data"]);  
                    for(var i=0;i<result["data"].length;i++){  
//                      alert(result["data"][i]["name"]);  
                       names.push(result["data"][i]["name"]);    //挨个取出名称并填入类别数组  
                     }  
                    for(var i=0;i<result["data"].length;i++){  
//                      alert(result["data"][i]["num"]);  
                        nums.push(result["data"][i]["num"]);    //挨个取出数量并填入销量数组  
                      }  
                    myChart.hideLoading();    //隐藏加载动画  
                    myChart.setOption({        //加载数据图表  
                        xAxis: {  
                            data: names  
                        },  
                        series: [{  
                            // 根据名字对应到相应的系列  
                            name: '数量',  
                            data: nums  
                        }]  
                    });  
  
             }  
  
        },  
         error : function(errorMsg) {  
             //请求失败时执行该函数  
         alert("图表请求数据失败!");  
         myChart.hideLoading();  
         }  
    })  
    </script>  
</html>  

test.py:

[python]view plain copy
# -*- coding: utf-8 -*-  
#__author__="ZJL"  
  
from flask import Flask  
from flask import request  
from flask import Response  
  
import json  
  
app = Flask(__name__)  
  
def Response_headers(content):  
    resp = Response(content)  
    resp.headers['Access-Control-Allow-Origin'] = '*'  
    return resp  
 
@app.route('/')  
def hello_world():  
    return Response_headers('hello world')  
 
@app.route('/echarts')  
def echarts():  
    datas = {  
        "data":[  
            {"name":"allpe","num":100},  
            {"name":"peach","num":123},  
            {"name":"Pear","num":234},  
            {"name":"avocado","num":20},  
            {"name":"cantaloupe","num":1},  
            {"name":"Banana","num":77},  
            {"name":"Grape","num":43},  
            {"name":"apricot","num":0}  
        ]  
    }  
    content = json.dumps(datas)  
    resp = Response_headers(content)  
    return resp  
 
@app.errorhandler(403)  
def page_not_found(error):  
    content = json.dumps({"error_code": "403"})  
    resp = Response_headers(content)  
    return resp  
 
@app.errorhandler(404)  
def page_not_found(error):  
    content = json.dumps({"error_code": "404"})  
    resp = Response_headers(content)  
    return resp  
 
@app.errorhandler(400)  
def page_not_found(error):  
    content = json.dumps({"error_code": "400"})  
    resp = Response_headers(content)  
    return resp  
 
@app.errorhandler(410)  
def page_not_found(error):  
    content = json.dumps({"error_code": "410"})  
    resp = Response_headers(content)  
    return resp  
 
@app.errorhandler(500)  
def page_not_found(error):  
    content = json.dumps({"error_code": "500"})  
    resp = Response_headers(content)  
    return resp  
  
if __name__ == '__main__':  
    app.run(debug=True)#threaded=True,  