效果如图:
后端代码:
<?php
require_once("dbtools.inc.php");//连接数据库的函数
$link = create_connection();
$sql="SELECT time,envir_tem,envir_hum,soil_PH,soil_tem,soil_hum,illum FROM farm ORDER by id DESC limit 1";
$result = execute_sql($link, "iot", $sql);
$data1="";
$array= array();
class User{
# public $id;
public $time;
public $envir_tem;
public $envir_hum;
public $soil_PH;
public $soil_tem;
public $soil_hum;
public $illum;
}
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
// $user=new User();
# $user->id = $row['id'];
// $user->time = $row['time'];
// $user->envir_tem = $row['envir_tem'];
//$user->envir_hum = (float)$row['envir_hum'];
// $user->soil_PH = $row['soil_PH'];
// $user->soil_tem = $row['soil_tem'];
//00 $user->soil_hum =(float) $row['soil_hum'];
// $user->illum = $row['illum'];
$time1 = $row['time'];
$tem2= $row['envir_tem'];
// $array[]=$user;
}
if(empty($_POST['time']))exit();
set_time_limit(0);//无限请求超时时间
$i=0;
while (true){
//sleep(1);
usleep(500000);//0.5秒
$i++;
//若得到数据则马上返回数据给客服端,并结束本次请求
$rand=rand(1,999);
if($rand<=999){
$arr=array('success'=>"1",'name'=>'xiaoyu','time'=>$time1,'tem'=>$tem2);
echo json_encode($arr);
exit();
}
//服务器($_POST['time']*0.5)秒后告诉客服端无数据
if($i==$_POST['time']){
$arr=array('success'=>"0",'name'=>'xiaoyu','time'=>$time1,'tem'=>$tem2);
// $data1=json_encode($array);
// echo "{".'"user"'.":".$data."}";
//echo $data1;
echo json_encode($arr);
exit();
}
}
?>
前端代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://s1.hqbcdn.com/??lib/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="echarts.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="chartmain" style="width:600px; height: 400px;"></div>
<p id="msg"></p>
<input id="btn" type="button" value="测试" />
<script type="text/javascript" >
var myChart = echarts.init(document.getElementById('chartmain'));
var base = + new Date(2017,3,8);
var oneDay = 24*3600*1000;
var date = [];
var data = [Math.random()*150];
var now = new Date(base);
var day = 30;
var arr1=[],arr2=[];
var time;
var tem;
$(function(){
$("#btn").bind("click",{btn:$("#btn")},function(evdata){
$.ajax({
type:"POST",
dataType:"json",
url:"jiankong.php",
timeout:80000, //ajax请求超时时间80秒
data:{time:"1"}, //40秒后无论结果服务器都返回数据
success:function(data,textStatus){
//从服务器得到数据,显示数据并继续查询
if(data.success=="1"){
$("#msg").append("<br>[有数据]"+data.time);
$("#msg").append("<br>[有数据]"+data.tem);
time=data.time;
tem=data.tem;
evdata.data.btn.click();
}
//未从服务器得到数据,继续查询
if(data.success=="0"){
$("#msg").append("<br>[无数据]");
evdata.data.btn.click();
}
},
//Ajax请求超时,继续查询
error:function(XMLHttpRequest,textStatus,errorThrown){
if(textStatus=="timeout"){
$("#msg").append("<br>[超时]");
evdata.data.btn.click();
}
}
});
});
});
var myChart = echarts.init(document.getElementById('chartmain'));
var base = + new Date(2017,3,8);
var oneDay = 24*3600*1000;
var date = [];
var data = [Math.random()*150];
var now = new Date(base);
var day = 30;
var arr1=[],arr2=[];
function addData(shift){
//now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');
date.push(time);
data.push(tem);
if (shift) {
console.log(data);
//date.shift();
// data.shift();
}
}
for (var i = 0; i < day; i++) {
addData();
}
//设置图标配置项
myChart.setOption({
title:{
text:'ECharts 30天内数据实时更新'
},
xAxis:{
type:"category",
boundaryGap:false,
data:date
},
yAxis:{
boundaryGap:[0,'100%'],
type:'value'
},
series:[{
name:'成交',
type:'line',
smooth:true, //数据光滑过度
symbol:'none', //下一个数据点
stack:'a',
areaStyle:{
normal:{
color:'red'
}
},
data:data
}]
})
setInterval(function(){
addData(true);
myChart.setOption({
xAxis:{
data:date
},
series:[{
name:'成交',
data:data
}]
});
},200)
</script>
</body>
</html>
不嫌麻烦将就看看吧,有很多小问题没时间去改了