flask数据用ECharts图表形式展现

╰半夏微凉° 2022-06-13 14:39 187阅读 0赞

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

test.html

<html>
    	<head>
    		
    	    <script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.js"></script>
    	    
    	    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    	</head>
    	<body>
    		
        	<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:

# -*- 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,

![Center][]

![Center 1][]

![Center 2][]

[Center]: /images/20220613/58aa2191f3904166a503a93b88f87bf9.png
[Center 1]: /images/20220613/2a261e6dce3f412790eb1847ddafa42b.png
[Center 2]: /images/20220613/692dd3b27c8f4e14ab4d82e60fa7ddca.png