flask資料用ECharts圖表形式展現
阿新 • • 發佈：2019-01-04
簡單寫一個，一個flask後臺傳送資料，一個前端ajax接收資料並用echarts圖表展示
test.html
<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:
# -*- 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,
