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

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

ECharts

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

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

下载js代码

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

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

下载Echarts

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

工作原理浅析

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

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

ECharts3下载

在项目中引入ECharts

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

不妨看一下下面的代码：

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

关键在于***一句：

 
 
 
 
    
  
  
  
  
  1. myChart.setOption(option1); 
    2.

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

Tutorial测试

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

接下来开始进入今天的正题

后台处理

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

数据库端MySQL

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

建立数据库

PHP端

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

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

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

JSON接口测试

JQuery & Ajax处理

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

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

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

ECharts 端处理

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

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

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

前端全部代码

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

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

演示结果

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

效果演示图

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

修改完数据

更新之后的数据

总结

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

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

分享名称：ECharts,PHP,MySQL,Ajax,JQuery实现前后端数据可视化
分享URL：http://www.shufengxianlan.com/qtweb/news43/374643.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

小程序开发知识

同城分类信息

三台网站建设　　 　企业网站设计　　 　成都网站建设　　 　温江网站建设　　 　成都企业网站定制　　 　H5网站制作　　 　平山县网站建设　　 　网站营销推广　　 　成都网络营销　　 　乐山做网站　　 　绵阳网站制作　　 　手机软件开发　　 　成都搅拌罐车　　 　节能环保网站建设方案　　 　乐山服务器托管　　 　软文营销　　 　眉山服务器托管　　 　成都服装定制　　 　免备案空间　　 　关键词排名