PHP + mysql + Ajax + ECahrts绘制图表信息

最新推荐文章于 2021-03-17 01:40:53 发布

姑苏城外_寒山寺

最新推荐文章于 2021-03-17 01:40:53 发布

阅读量763

点赞数

分类专栏： html mysql javascript php 文章标签： php mysql ajax echarts 绘制图表

本文链接：https://blog.csdn.net/wpy1282316637/article/details/75028827

版权

mysql 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

php

5 篇文章 0 订阅

订阅专栏

PHP + mysql + Ajax + ECahrts绘制图表信息

本功能需要用到echarts插件，可在百度上下载，下载地址：http://echarts.baidu.com

一、创建数据库连接文件，命名为connect.php：

<?php

error_reporting(7);
$mysql_server_name='localhost'; // mysql数据库服务器
$mysql_username='root'; // mysql数据库用户名
$mysql_password='root'; // mysql数据库密码
$mysql_database='move'; // mysql数据库名

$conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting") ; //连接数据库
mysql_query("set names 'utf8'"); //数据库输出编码
mysql_select_db($mysql_database); //打开数据库

二、创建查询数据库并处理数据的文件,命名为index.php：

<?php
require 'connect.php';//引入数据库连接配置文件
$result = mysql_query("select id,sort from sortlist");
$data= array();
class User{
public $id;
public $sort;
}
while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
$user=new User();
$user->id = $row['id'];
$user->sort = $row['sort'];
$data[]=$user;
}
if($_POST) {echo json_encode($data);exit;}
else include 'index.html';
?>

三、编写前台页面，命名为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.min.js"></script>
</head>
<body>
<h1>PHP + mysql + Ajax + ECahrts绘制图表信息</h1>
<hr>
<div id="container" style="width: 600px; height: 400px;"></div>
<script>
// 初始化两个数组，盛装从数据库中获取到的数据
var id = [], sort = [];
//调用ajax来实现异步的加载数据
function getusers() {
$.ajax({
type: "post",
async: false,
url: "index.php",
data: {act:'ef'},
dataType: "json",
success: function(result){
if(result){
for(var i = 0 ; i < result.length; i++){
id.push(result[i].id);
sort.push(result[i].sort);
}
}
},
error: function(errmsg) {
alert("Ajax获取服务器数据出错了！"+ errmsg);
}
});
return id, sort;
}
// 执行异步请求
getusers();
// 初始化图表对象
var mychart = echarts.init(document.getElementById("container"));
// 进行相关项的设置，也就是所谓的搭搭骨架，方便待会的ajax异步的数据填充
var option = {
title : {
text : '排序'
},
tooltip : {
show : true
},
legend : {
data : [ 'sort' ]
},
xAxis : [ {
data : id
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "sort",
"type" : "bar",
"data" : sort
} ]
};
// 将配置项赋给chart对象，来显示相关的数据
mychart.setOption(option);
</script>
<marquee>确认可以到达这里啊</marquee>

</body>
</html>