flask数据用ECharts图表形式展现

转载 2018年04月17日 21:30:29

转载自 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,  






毕设-使用ECharts做图表展示

数据是用来展示的。ECharts 有几个选择方案: 1、后台拼接:在后台拼接HTML,传到前台jsp使用,然后显示 EChart += "" + "" + "" + ""...
  • Damionew
  • Damionew
  • 2018-01-17 18:07:15
  • 266

【python web】Flask+Echarts 实现动图图表

flask 是python web开发的微框架,Echarts酷炫的功能主要是javascript起作用,将两者结合起来,发挥的作用更大。下面将Echarts嵌套进Flask的html模板中。项目结构...
  • u013421629
  • u013421629
  • 2017-10-09 15:46:35
  • 3533

echarts+Servlet+mysql从数据库获取数据实现简单图表展示

  • 2017年03月17日 20:27
  • 2.06MB
  • 下载

使用echarts显示图表

使用echarts图表的类型很多,如散点图,折线图,柱状图,地图,饼图,雷达图,热力图。。。。。。 1.首先要引入echarts库,在echarts官网可以下载http://echarts.baidu...
  • u012631731
  • u012631731
  • 2017-06-08 22:20:50
  • 346

大数据可视化展现之echarts实操

作为大数据分析的最终目的是为了得到某种形式的输出结果,而这些输出结果大都以可视化图表的形式进行展示,当然了有些大数据分析不需要图表展示如推荐系统。而可视化展现自然需要一套好用的图表插件,市场上有很多可...
  • jmfang
  • jmfang
  • 2017-09-08 14:08:23
  • 629

用Dreamweaver将数据库中的数据以柱状图的形式动态展示于网页中

用Dreamweaver将数据库中的数据以柱状图的形式动态展示于网页中 ():表示解释说明 一、从数据库中统计数据 dim lable1(6),avg1(6),color(6)    ...
  • tongchuan19950202
  • tongchuan19950202
  • 2014-12-16 17:21:33
  • 575

echarts 图表 展示 练习二 (ajax 后台加载数据)

上次写了基础的图表展示,这次简单介绍一下ajax后台取的数据并展示的练习,一上次为基础。     jsp页面配置和之前一样就有一点不同,讲解一下。 第一步:(不变) src="${path}/...
  • happyvx
  • happyvx
  • 2015-08-06 16:14:21
  • 2066

Flask入门:sqlite3 + psutil + echarts 监测CPU使用率

最终展示图:平台:win32 , pycharm, python2.7本文主要使用分为三个部分: 1.监视器(monitor.py): 使用python三方模块psutil,每秒获取当前系统cpu...
  • u010663768
  • u010663768
  • 2017-03-06 23:55:53
  • 2033

Echart实现从数据库获取数据展示图表(结合Servlet和SSM实现的两种实例)

使用Echarts实现从数据库获取数据进行展示(结合servlet和SSM框架实现的两种实例)。...
  • Aray1234
  • Aray1234
  • 2017-03-17 21:14:14
  • 3080

【爬虫学习】数据绘成图表学习心得

使用jupyter Notebook网上编辑器进行代码编写,代码联想可以用table键 1、符号库导入,from string import punctuation 使用if i not in pu...
  • jzz3933
  • jzz3933
  • 2017-12-09 23:28:05
  • 110
收藏助手
不良信息举报
您举报文章:flask数据用ECharts图表形式展现
举报原因:
原因补充:

(最多只允许输入30个字)