「软件资料」-「技术分享」-PHP Ajax ECahrts 测试
1、创建测试数据库
# Host: localhost (Version: 5.5.53)
# Date: 2019-03-04 14:56:48
# Generator: MySQL-Front 5.3 (Build 4.234)
/*!40101 SET NAMES utf8 */;
#
# Structure for table "user"
#
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL DEFAULT '',
`age` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
#
# Data for table "user"
#
INSERT INTO `user` VALUES (1,'小明',99),(2,'小王',23),(3,'小花',101),(4,'小张',120);
返回结果如下:
2、数据库配置文件 db_config.php
<?php
$mysql_server_name='localhost'; //改成自己的mysql数据库服务器
$mysql_username='root'; //改成自己的mysql数据库用户名
$mysql_password='root'; //改成自己的mysql数据库密码,初始默认密码为空
$mysql_database='echats'; //改成自己的mysql数据库名
?>
3、获取josn数据 test.php
<?php
require("db_config.php");
$conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("连接数据库的过程失败！") ;
mysql_query("set names 'utf8'"); //数据库输出编码
mysql_select_db($mysql_database); //打开数据库
$result = mysql_query("select * from user");
///准备数据进行装填
$data="";
$array= array();
////实体类
class User{
public $name;
public $age;
}
///////处理
while($row = mysql_fetch_array($result,MYSQLI_ASSOC)){
$user=new User();
$user->name = $row['name'];
$user->age = $row['age'];
$array[]=$user;
}
$data=json_encode($array);
// echo "{".'"user"'.":".$data."}";
// 返回JSON类型的数据
echo $data;
?>
返回结果如下：
[{"name":"\u5c0f\u660e","age":"99"},{"name":"\u5c0f\u738b","age":"23"},{"name":"\u5c0f\u82b1","age":"101"},{"name":"\u5c0f\u5f20","age":"120"}]
4、ECahrts页面 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Ajax Test</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-1.11.1.min.js"></script>
</head>
<body>
<h1>PHP Ajax ECahrts 测试</h1>
<hr>
<div id="container" style="width: 600px; height: 400px;"></div>
<script>
// 初始化两个数组，盛装从数据库中获取到的数据
var names = [], ages = [];
//调用ajax来实现异步的加载数据
function arrTest() {
$.ajax({
type: "post",
async: false,
url: "../test.php",
data: {},
dataType: "json",
success: function(result){
if(result){
for(var i = 0 ; i < result.length; i++){
names.push(result[i].name);
ages.push(result[i].age);
}
}
},
error: function(errmsg) {
alert("Ajax获取服务器数据出错了！"+ errmsg);
}
});
return names, ages;
}
// 执行异步请求
arrTest();
// 初始化 图表对象
var mychart = echarts.init(document.getElementById("container"));
// 进行相关项的设置，也就是所谓的搭搭骨架，方便待会的ajax异步的数据填充
var option = {
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>
返回结果如下：
5、文件目录
请先 后发表评论～