flask数据用ECharts图表形式展现

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

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

test.html

[html] view plain copy
  1. <html>  
  2.     <head>  
  3.         <!-- 引入 echarts.js -->  
  4.         <script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.js"></script>  
  5.         <!-- 引入jquery.js -->  
  6.         <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <!-- 为ECharts准备一个具备大小(宽高)的Dom -->  
  10.         <div id="main" style="width: 900px;height:500px;"></div>  
  11.     </body>  
  12.     <script type="text/javascript">  
  13.         var a = echarts;  
  14.         var myChart = a.init(document.getElementById('main'));  
  15.          // 显示标题,图例和空的坐标轴  
  16.          myChart.setOption({  
  17.              title: {  
  18.                  text: '爬虫今日抓取数据图'  
  19.              },  
  20.              tooltip : {  
  21.             trigger: 'axis'  
  22.             },  
  23.             legend: {  
  24.                 data:['今日数据']  
  25.             },  
  26.             toolbox: {  
  27.                 show : true,  
  28.                 feature : {  
  29.                     mark : {show: true},  
  30.                     dataView : {show: true, readOnly: false},  
  31.                     magicType : {show: true, type: ['line', 'bar']},  
  32.                     // restore : {show: true},  
  33.                     // saveAsImage : {show: true}  
  34.                 }  
  35.             },  
  36.             calculable : true,  
  37.   
  38.              xAxis : [  
  39.                 {  
  40.                     type : 'category',  
  41.                     boundaryGap : false,  
  42.                     data : []  
  43.                 }  
  44.             ],  
  45.              yAxis : [  
  46.                 {  
  47.                     type : 'value',  
  48.                     axisLabel : {  
  49.                         formatter: '{value}'  
  50.                     }  
  51.                 }  
  52.             ],  
  53.              series : [  
  54.                 {  
  55.                     name:'最多数量',  
  56.                     type:'line',  
  57.                     data:[],  
  58.                     markPoint : {  
  59.                         data : [  
  60.                             {type : 'max', name: '最大值'},  
  61.                             {type : 'min', name: '最小值'}  
  62.                         ]  
  63.                     },  
  64.                     markLine : {  
  65.                         data : [  
  66.                             {type : 'average', name: '平均值'}  
  67.                         ]  
  68.                     }  
  69.                 },]  
  70.          });  
  71.          myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画  
  72.          var names=[];    //名称数组(实际用来盛放X轴坐标值)  
  73.          var nums=[];    //数量数组(实际用来盛放Y坐标值)  
  74.          $.ajax({  
  75.          type : "get",  
  76. //       async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)  
  77.          url : "http://127.0.0.1:5000/echarts",    //请求发送到Servlet处  
  78. //       data : {},  
  79.          dataType : "json",        //返回数据形式为json  
  80.          success : function(result) {  
  81.              //请求成功时执行该函数内容,result即为服务器返回的json对象  
  82.              if (result) {  
  83. //              alert(result["data"]);  
  84.                     for(var i=0;i<result["data"].length;i++){  
  85. //                      alert(result["data"][i]["name"]);  
  86.                        names.push(result["data"][i]["name"]);    //挨个取出名称并填入类别数组  
  87.                      }  
  88.                     for(var i=0;i<result["data"].length;i++){  
  89. //                      alert(result["data"][i]["num"]);  
  90.                         nums.push(result["data"][i]["num"]);    //挨个取出数量并填入销量数组  
  91.                       }  
  92.                     myChart.hideLoading();    //隐藏加载动画  
  93.                     myChart.setOption({        //加载数据图表  
  94.                         xAxis: {  
  95.                             data: names  
  96.                         },  
  97.                         series: [{  
  98.                             // 根据名字对应到相应的系列  
  99.                             name: '数量',  
  100.                             data: nums  
  101.                         }]  
  102.                     });  
  103.   
  104.              }  
  105.   
  106.         },  
  107.          error : function(errorMsg) {  
  108.              //请求失败时执行该函数  
  109.          alert("图表请求数据失败!");  
  110.          myChart.hideLoading();  
  111.          }  
  112.     })  
  113.     </script>  
  114. </html>  


test.py:

[python] view plain copy
  1. # -*- coding: utf-8 -*-  
  2. #__author__="ZJL"  
  3.   
  4. from flask import Flask  
  5. from flask import request  
  6. from flask import Response  
  7.   
  8. import json  
  9.   
  10. app = Flask(__name__)  
  11.   
  12. def Response_headers(content):  
  13.     resp = Response(content)  
  14.     resp.headers['Access-Control-Allow-Origin'] = '*'  
  15.     return resp  
  16.  
  17. @app.route('/')  
  18. def hello_world():  
  19.     return Response_headers('hello world')  
  20.  
  21. @app.route('/echarts')  
  22. def echarts():  
  23.     datas = {  
  24.         "data":[  
  25.             {"name":"allpe","num":100},  
  26.             {"name":"peach","num":123},  
  27.             {"name":"Pear","num":234},  
  28.             {"name":"avocado","num":20},  
  29.             {"name":"cantaloupe","num":1},  
  30.             {"name":"Banana","num":77},  
  31.             {"name":"Grape","num":43},  
  32.             {"name":"apricot","num":0}  
  33.         ]  
  34.     }  
  35.     content = json.dumps(datas)  
  36.     resp = Response_headers(content)  
  37.     return resp  
  38.  
  39. @app.errorhandler(403)  
  40. def page_not_found(error):  
  41.     content = json.dumps({"error_code""403"})  
  42.     resp = Response_headers(content)  
  43.     return resp  
  44.  
  45. @app.errorhandler(404)  
  46. def page_not_found(error):  
  47.     content = json.dumps({"error_code""404"})  
  48.     resp = Response_headers(content)  
  49.     return resp  
  50.  
  51. @app.errorhandler(400)  
  52. def page_not_found(error):  
  53.     content = json.dumps({"error_code""400"})  
  54.     resp = Response_headers(content)  
  55.     return resp  
  56.  
  57. @app.errorhandler(410)  
  58. def page_not_found(error):  
  59.     content = json.dumps({"error_code""410"})  
  60.     resp = Response_headers(content)  
  61.     return resp  
  62.  
  63. @app.errorhandler(500)  
  64. def page_not_found(error):  
  65.     content = json.dumps({"error_code""500"})  
  66.     resp = Response_headers(content)  
  67.     return resp  
  68.   
  69. if __name__ == '__main__':  
  70.     app.run(debug=True)#threaded=True,  






阅读更多
想对作者说点什么? 我来说一句

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