我这里用的是eCharts数据库图标,网址为：http://echarts.baidu.com/index.html 。
1)接收表单的数据,然后用json_encode()对接收的数据进行处理
2)在js中进行拼接并用eval（)函数执行,主要是要对接受的数据中重复的键进行合并，并计算出含该同样键的数目,
比如我这里的在数据库中含5条数据,就像这样[ {'id':'1' , 'temperatrue':'30'},{'id':'2' , 'temperatrue':'30'},{'id':'3' , 'temperatrue':'30'},{'id':'4' , 'temperatrue':'33'},{'id':'5' , 'temperatrue':'33'}] 然后经过函数处理后变为[ {'num':'3','name':'30'},{'num':'2','name':'33'} ],变成了其对应的健名对应的数目
说多无益，代码如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>数据图表</title>
</head>
<body>
<?php
/*功能：接受参数 并进行圆饼图展示
**POST的参数：
** $start_time（开始时间）$end_time(结束时间)
** $user_id (我用了客户的自增id标记记录所以这里是自增id)
** $data_type(数据类型分别对应数据库上的3个字段名:temperature wetness methane 其分别对应温度 湿度 甲烷浓度 )
** $data_sign(数据后面的符号 如temperature对应℃)
*/
include('./conn/conn.php');
$start_time = trim(addslashes($_POST['start_time']));
$end_time = trim(addslashes($_POST['end_time']));
$user_id = trim(addslashes($_POST['user_id']));
$data_type = trim(addslashes($_POST['data_type']));
$data_sign = iconv("gb2312", "UTF-8", $_POST['data_sign']); //转码 因为乱码了
//echo $data_sign."6666";
$conn = mysql_open();
$sql = "select * from echub where add_time>='".$start_time."' and add_time<='".$end_time."' and user_id='".$user_id."' order by ".$data_type;
$res = $conn -> getAll($sql);
//var_dump($res);
$res = (json_encode($res)); //要经过json才能在js使用
$data_type = (json_encode($data_type));
$data_sign = (json_encode($data_sign));
echo $data_type;
?>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px" width="100%" align="center"></div>
<!-- ECharts单文件引入 ℃-->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
var data1 = "["; //拼接第一个数据
var data = <?php echo $res ?>;
//alert("666");
//alert(data);
var data_type = <?php echo $data_type ?>;
//alert("666");
var data_sign = <?php echo $data_sign ?>;
var result = (typeof data == 'string') ? JSON.parse(data) : data;
//document.write(result[0]['temperature']+result.length);//测试
for(var i=0; i < result.length; i++){
if(i == 0){
data1 += "'"+result[i][data_type]+""+data_sign+"'"; //data1 += "'"+result[i][data_type]+"℃'";
}else{
data1 += ",'"+result[i][data_type]+""+data_sign+"'";
}
}
data1 += "]";
// alert(data1);
// document.write(data1);
var Value = "["; //用于拼接data中的value
var data_all = "["; //拼接显示的圆饼图核心数据
//var arr1 = "['30℃','30℃','30℃','30℃','31℃','32℃','32℃']";
var ary = eval（data1);
var res = [];
ary.sort();
for(var i = 0;i<ary.length;)
{
var count = 0;
for(var j=i;j<ary.length;j++)
{
if(ary[i] == ary[j])
{
count++;
}
}
res.push([ary[i],count]);
i+=count;
}
for(var i = 0; i < res.length; i++){
if(i == 0){
Value += "'"+res[i][0]+"'";
}else{
Value += ",'"+res[i][0]+"'";
}
}
Value += "]";
Value = eval（Value);
for(var i = 0; i < res.length; i++){
if(i == 0){
data_all += "{value:"+res[i][1]+",name:'"+res[i][0]+"'}";
}else{
data_all += ",{value:"+res[i][1]+",name:'"+res[i][0]+"'}";
}
}
data_all += "]";
data_all = eval（data_all);
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: 'echub',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data: Value //['30℃','31℃','32℃','33℃','34℃']
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data: data_all
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
