ECharts, PHP, MySQL, Ajax, JQuery实现前后端数据可视化（echarts后端数据交互）-大数据-知优网

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

ECharts, PHP, MySQL, Ajax, JQuery实现前后端数据可视化 JQuery实现前后端数据可视化（echarts后端数据交互）大数据数据可视化前后端第1张

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

ECharts

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

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

下载js代码

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

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

ECharts, PHP, MySQL, Ajax, JQuery实现前后端数据可视化（echarts后端数据交互）大数据数据可视化前后端第2张

下载Echarts

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

工作原理浅析

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

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

ECharts, PHP, MySQL, Ajax, JQuery实现前后端数据可视化（echarts后端数据交互）大数据数据可视化前后端第3张

ECharts3下载

在项目中引入ECharts

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

不妨看一下下面的代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>入门</title>
<scriptsrc="../static/js/echarts.js"></script>
<scriptsrc="../static/js/sleeplib.js"></script>
</head>
<body>
<h1>开始测试</h1>
<hr>
<!--先准备一个用于盛放图表的容器-->
//通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱状图
//基于准备好的DOM，实例化echarts实例
varmyChart=echarts.init(document.getElementById("container"));
//指定图表的配置项和数据
varoption1={
title:{
text:'ECharts入门案例'
},
tooltip:{
text:'鼠标放上去之后的悬浮提示语句！'
},
legend:{
data:['销量']
},
xAxis:{
data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子','内裤']
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[7,20,36,10,10,20,28]
}]
};
//使用上面的配置项作为参数，传给echart来显示
myChart.setOption(option1);
</script>
</body>
</html>

关键在于***一句：

myChart.setOption(option1);

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

ECharts, PHP, MySQL, Ajax, JQuery实现前后端数据可视化（echarts后端数据交互）大数据数据可视化前后端第4张

Tutorial测试

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

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

后台处理

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

数据库端MySQL

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

ECharts, PHP, MySQL, Ajax, JQuery实现前后端数据可视化（echarts后端数据交互）大数据数据可视化前后端第5张

建立数据库

PHP端

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

<?php
header("Content-type=text/json;charset=UTF-8");
$conn=mysql_connect("localhost","root","mysql")ordie("连接数据库的过程失败！");
mysql_query("setnamesutf-8");
mysql_select_db("test");
$resultset=mysql_query("selectname,agefromechartsuser",$conn);
////////////////////////////////////////////////准备数据进行装填
$data=array();
////////////////////////////////////////////////实体类
classUser{
public$username;
public$age;
}
////////////////////////////////////////////////处理
while($row=mysql_fetch_array($resultset,MYSQL_ASSOC)){
$user=newUser();
$user->username=$row['name'];
$user->age=$row['age'];
$data[]=$user;
}
$conn.close();
//返回JSON类型的数据
echojson_encode($data);

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

ECharts, PHP, MySQL, Ajax, JQuery实现前后端数据可视化（echarts后端数据交互）大数据数据可视化前后端第6张

JSON接口测试

JQuery & Ajax处理

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

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

//初始化两个数组，盛装从数据库中获取到的数据
varnames=[],ages=[];
//调用ajax来实现异步的加载数据
functiongetusers(){
$.ajax({
type:"post",
async:false,
url:"../app/getuser.php",
data:{},
dataType:"json",
success:function(result){
if(result){
for(vari=0;i<result.length;i++){
names.push(result[i].username);
ages.push(result[i].age);
}
}
},
error:function(errmsg){
alert("Ajax获取服务器数据出错了！"+errmsg);
}
});
returnnames,ages;
}
//执行异步请求
getusers();

ECharts 端处理

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

//初始化图表对象
varmychart=echarts.init(document.getElementById("container"));
//进行相关项的设置，也就是所谓的搭搭骨架，方便待会的ajax异步的数据填充
varoption={
title:{
text:'姓名年龄分布图'
},
tooltip:{
show:true
},
legend:{
data:['age']
},
xAxis:[{
data:names
}],
yAxis:[{
type:'value'
}],
series:[{
"name":"age",
"type":"bar",
"data":ages
}]
};
//将配置项赋给chart对象，来显示相关的数据
mychart.setOption(option);

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

前端全部代码

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

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>JQueryAjaxTest</title>
<scriptsrc="../static/js/echarts.js"></script>
<scriptsrc="../static/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<h1>PHPAjaxECahrts测试</h1>
<hr>
//初始化两个数组，盛装从数据库中获取到的数据
varnames=[],ages=[];
//调用ajax来实现异步的加载数据
functiongetusers(){
$.ajax({
type:"post",
async:false,
url:"../app/getuser.php",
data:{},
dataType:"json",
success:function(result){
if(result){
for(vari=0;i<result.length;i++){
names.push(result[i].username);
ages.push(result[i].age);
}
}
},
error:function(errmsg){
alert("Ajax获取服务器数据出错了！"+errmsg);
}
});
returnnames,ages;
}
//执行异步请求
getusers();
//初始化图表对象
varmychart=echarts.init(document.getElementById("container"));
//进行相关项的设置，也就是所谓的搭搭骨架，方便待会的ajax异步的数据填充
varoption={
title:{
text:'姓名年龄分布图'
},
tooltip:{
show:true
},
legend:{
data:['age']
},
xAxis:[{
data:names
}],
yAxis:[{
type:'value'
}],
series:[{
"name":"age",
"type":"bar",
"data":ages
}]
};
//将配置项赋给chart对象，来显示相关的数据
mychart.setOption(option);
</script>
<marquee>确认可以到达这里啊</marquee>
</body>
</html>