中国领先的IT技术网站
|
|

ECharts, PHP, MySQL, Ajax, JQuery实现前后端数据可视化

最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo。于是写下来,记录一下。

作者:菩提树下的煮茶小童子来源:36大数据|2017-10-11 18:17

沙龙活动 | 去哪儿、陌陌、ThoughtWorks在自动化运维中的实践!10.28不见不散!


ECharts, PHP, MySQL, Ajax, JQuery实现前后端数据可视化

最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo。于是写下来,记录一下。

ECharts

ECharts是国人开发的一套前端的图表工具库,使用起来超方便,也很简单(当然了,前提是理解了其工作原理之后)。

下面简单的介绍一下,如何在项目中使用ECharts。

下载js代码

下载地址: http://echarts.baidu.com/

个人觉得,开发人员下载完整版会比较好一点。而且官方建议的也是下载完整版。

下载Echarts

博主这里下载的是完整版,大约不到2M。

工作原理浅析

其实仔细的想想,ECharts的工作就是在网页上显示了一张特殊的图片嘛。所以我们需要意识到,需要给“图片”一个一个空间,这样才会有图表的安家之所嘛。

然后空间有了,也就是有地皮了。要盖一个房子的话,必须得有框架不是。这样的往上面添加些砖瓦水泥什么的才能将房子盖起来。同样的,ECharts也是这么个原理。但是这个“骨架”叫Option。至于这个option需要怎么设置,官网上有详细的介绍,博主就不再这里重复的造轮子了。大家有兴趣的可以到下图展示的地方去学习。

ECharts3下载

在项目中引入ECharts

如题,本小节就是大致的讲一下如何简单的使用这个图标库。

不妨看一下下面的代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>入门</title> 
  6. <script src="../static/js/echarts.js"></script> 
  7. <script src="../static/js/sleeplib.js"></script> 
  8. </head> 
  9. <body> 
  10.  
  11.     <h1>开始测试</h1> 
  12.     <hr> 
  13.     <!-- 先准备一个用于盛放图表的容器 --> 
  14.     
  15.         //通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图 
  16.  
  17.         //基于准备好的DOM,实例化echarts实例 
  18.         var myChart = echarts.init(document.getElementById("container")); 
  19.  
  20.         // 指定图表的配置项和数据 
  21.         var option1 = { 
  22.             title : { 
  23.                 text : 'ECharts 入门案例' 
  24.             }, 
  25.             tooltip : { 
  26.                 text : '鼠标放上去之后的悬浮提示语句!' 
  27.             }, 
  28.             legend : { 
  29.                 data : [ '销量' ] 
  30.             }, 
  31.             xAxis : { 
  32.                 data : [ '衬衫''羊毛衫''雪纺衫''裤子''高跟鞋''袜子''内裤' ] 
  33.             }, 
  34.             yAxis : {}, 
  35.             series : [ { 
  36.                 name : '销量'
  37.                 type : 'bar'
  38.                 data : [ 7, 20, 36, 10, 10, 20, 28 ] 
  39.             } ] 
  40.         }; 
  41.  
  42.         // 使用上面的配置项作为参数,传给echart来显示 
  43.         myChart.setOption(option1); 
  44.     </script> 
  45. </body> 
  46. </html>  

关键在于最后一句:

  1. myChart.setOption(option1); 

起作用不言而喻了吧。那么,得到的效果是什么呢? 如下图:

Tutorial测试

另外手动的点击上面的那个legend为“销量”的小红色的矩形,会有惊喜的哟。

<marquee><font color=”green” size=’6′>接下来开始进入今天的正题</font></marquee>

后台处理

后台处理包括使用PHP查询数据库,然后以数组的形式返回,再由JQuery以Ajax的形式获取数据,交给前端进行显示的过程。

数据库端MySQL

数据是核心,所以建库很重要。这里仅仅是为了演示,所以数据库建的很简单,如下图:

建立数据库

PHP端

需要注意的是,数据库端返回的时候必须是JSON类型,这样才可以被ajax处理的更方便。

  1. <?php 
  2. header("Content-type=text/json;charset=UTF-8"); 
  3.  
  4. $conn = mysql_connect("localhost""root""mysql"or die("连接数据库的过程失败!"); 
  5. mysql_query("set names utf-8"); 
  6. mysql_select_db("test"); 
  7.  
  8.  
  9. $resultset = mysql_query("select name, age  from echartsuser", $conn); 
  10. ////////////////////////////////////////////////准备数据进行装填 
  11. $data = array(); 
  12. ////////////////////////////////////////////////实体类 
  13. class User
  14.     public $username; 
  15.     public $age; 
  16. ////////////////////////////////////////////////处理 
  17. while($row = mysql_fetch_array($resultset, MYSQL_ASSOC)) { 
  18.     $user = new User(); 
  19.     $user->username = $row['name']; 
  20.     $user->age = $row['age']; 
  21.     $data[] = $user
  22. $conn.close(); 
  23. // 返回JSON类型的数据 
  24. echo json_encode($data);  

那么验证返回的数据类型到底是不是JSON,我们只需要做下接口测试即可。博主使用的是Chrome浏览器,装了一个JSON的插件,所以可以很方便的检测。如下图:

JSON接口测试

JQuery & Ajax处理

JQuery真的是难的的一个函数工具库,因此使用JQuery处理起来ajax请求会降低代码编写的复杂度,其底层将自动的处理兼容性问题。这很GEEK。

本例,目的很明确,获取刚才的数据接口内的数据。所以代码很简单,如下:

  1. // 初始化两个数组,盛装从数据库中获取到的数据 
  2.     var names = [], ages = []; 
  3.      
  4.     //调用ajax来实现异步的加载数据 
  5.     function getusers() { 
  6.         $.ajax({ 
  7.             type: "post"
  8.             async: false
  9.             url: "../app/getuser.php"
  10.             data: {}, 
  11.             dataType: "json"
  12.             success: function(result){ 
  13.                 if(result){ 
  14.                     for(var i = 0 ; i < result.length; i++){ 
  15.                         names.push(result[i].username); 
  16.                         ages.push(result[i].age); 
  17.                     } 
  18.                 } 
  19.             }, 
  20.             error: function(errmsg) { 
  21.                 alert("Ajax获取服务器数据出错了!"+ errmsg); 
  22.             } 
  23.         }); 
  24.     return names, ages; 
  25.     } 
  26.      
  27.     // 执行异步请求 
  28.     getusers();  

ECharts 端处理

现在“万事俱备,只欠东风”了,数据都已经有了,剩下的就是如何显示它们了。按照一开始博主的盖房子理论,下面就把骨架搭起来吧。

  1. // 初始化 图表对象 
  2.         var mychart = echarts.init(document.getElementById("container")); 
  3.         // 进行相关项的设置,也就是所谓的搭搭骨架,方便待会的ajax异步的数据填充 
  4.         var option = { 
  5.             title : { 
  6.                 text : '姓名年龄分布图' 
  7.             }, 
  8.             tooltip : { 
  9.                 show : true 
  10.             }, 
  11.             legend : { 
  12.                 data : [ 'age' ] 
  13.             }, 
  14.             xAxis : [ { 
  15.                 data : names 
  16.             } ], 
  17.             yAxis : [ { 
  18.                 type : 'value' 
  19.             } ], 
  20.             series : [ { 
  21.                 "name" : "age"
  22.                 "type" : "bar"
  23.                 "data" : ages 
  24.             } ] 
  25.         }; 
  26.  
  27.         // 将配置项赋给chart对象,来显示相关的数据 
  28.         mychart.setOption(option);  

注意xAxis: 里面的names,和series里面的ages就是之前JQuery使用ajax方式获取到的数据啦。

前端全部代码

个人觉得有个完整的代码会给人不少的启发,那么这里还是贴出前端交互的代码吧,也方便大家查看。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>JQuery Ajax Test</title> 
  6. <script src="../static/js/echarts.js"></script> 
  7. <script src="../static/js/jquery-1.11.1.min.js"></script> 
  8. </head> 
  9. <body> 
  10.     <h1>PHP Ajax ECahrts 测试</h1> 
  11.     <hr> 
  12.  
  13.      
  14.     // 初始化两个数组,盛装从数据库中获取到的数据 
  15.     var names = [], ages = []; 
  16.      
  17.     //调用ajax来实现异步的加载数据 
  18.     function getusers() { 
  19.         $.ajax({ 
  20.             type: "post"
  21.             async: false
  22.             url: "../app/getuser.php"
  23.             data: {}, 
  24.             dataType: "json"
  25.             success: function(result){ 
  26.                 if(result){ 
  27.                     for(var i = 0 ; i < result.length; i++){ 
  28.                         names.push(result[i].username); 
  29.                         ages.push(result[i].age); 
  30.                     } 
  31.                 } 
  32.             }, 
  33.             error: function(errmsg) { 
  34.                 alert("Ajax获取服务器数据出错了!"+ errmsg); 
  35.             } 
  36.         }); 
  37.     return names, ages; 
  38.     } 
  39.      
  40.     // 执行异步请求 
  41.     getusers(); 
  42.      
  43.      
  44.     // 初始化 图表对象 
  45.         var mychart = echarts.init(document.getElementById("container")); 
  46.         // 进行相关项的设置,也就是所谓的搭搭骨架,方便待会的ajax异步的数据填充 
  47.         var option = { 
  48.             title : { 
  49.                 text : '姓名年龄分布图' 
  50.             }, 
  51.             tooltip : { 
  52.                 show : true 
  53.             }, 
  54.             legend : { 
  55.                 data : [ 'age' ] 
  56.             }, 
  57.             xAxis : [ { 
  58.                 data : names 
  59.             } ], 
  60.             yAxis : [ { 
  61.                 type : 'value' 
  62.             } ], 
  63.             series : [ { 
  64.                 "name" : "age"
  65.                 "type" : "bar"
  66.                 "data" : ages 
  67.             } ] 
  68.         }; 
  69.  
  70.         // 将配置项赋给chart对象,来显示相关的数据 
  71.         mychart.setOption(option); 
  72.          
  73.          
  74.          
  75.          
  76.     </script> 
  77. <marquee>确认可以到达这里啊</marquee> 
  78.  
  79. </body> 
  80. </html>  

演示结果

至此,编码任务就算完成了。那么迫不及待的来看看效果吧。

效果演示图

那么,稍微的修改一下数据,再来看看结果会怎样,刷新之后如下图:

修改完数据

更新之后的数据

总结

最后来回顾一下,本次试验的收获。其实也就是对于ECharts的一个比较“全栈”(请允许我用了这么个不太恰当的词 O(∩_∩)O ) 。比较简单的实现了后端以及前端的数据可视化显示的一个流程。

用到的技术也都是很大众化的了,当然后端不仅可以由PHP来完成,JAVA,Python,Golang等等都是可以的,只是使用PHP比较方便罢了。只要可以根据这个接口获取到想要的数据就行。

【编辑推荐】

  1. 制胜云和大数据时代 思特奇全面助力运营商智慧运营
  2. 数据可视化的7个好处
  3. 大数据时代,云计算如何为仿真技术插上“翅膀”
  4. 日活跃数千万,10亿级APP大数据统计分析平台的架构演进
  5. 当我们准备做前后端分离项目时,我们在考虑什么?
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Microsoft SQL Server 2005技术内幕:存储引擎

本书是Inside Microsoft SQL Server 2000的作者Kalen Delaney的又一经典著作,是Inside Microsoft SQL Server 2005系列四本著作中的一本。...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× Python最火的编程语言