<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>溶解氧和PH时间统计图</title>
|
<script src="js/jquery.js"></script>
|
<script src="js/echarts.min.js"></script>
|
</head>
|
<body>
|
<div id="rain" style="height: 250px;width: 500px;"></div>
|
</body>
|
<script>
|
$(function () {
|
var myChart_ = document.getElementById('rain');
|
var myChart = echarts.init(document.getElementById('rain'));
|
|
var myChartContainer = function () {
|
|
var width = $("#right-cont .map",window.parent.document).width()+"px";
|
var height = ($("#right-cont .map",window.parent.document).height()+30)+"px";
|
myChart_.style.width =width;
|
myChart_.style.height =height
|
|
|
};
|
myChartContainer();
|
|
setInterval(function () {
|
var strurl = "";
|
strurl = "http://59.55.128.155:3333/index.ashx";
|
jQuery.ajax({
|
url: strurl,
|
type: "post",
|
dataType: "json",
|
data: {
|
Action: "MonthData_4731",
|
AjaxFlag: true
|
},
|
success: function (value) {
|
ConfigData = value;
|
var a = [];
|
var b=[];
|
for(var i =0;i<value.length;i++){
|
a .push(value[i].Doppm);
|
b.push(value[i].Date);
|
}
|
|
myChart.setOption({
|
xAxis:{
|
data:b
|
},
|
series:{
|
data:a
|
}
|
|
});
|
}
|
})
|
},1800000);
|
|
var strurl = "";
|
strurl = "http://59.55.128.155:3333/index.ashx";
|
jQuery.ajax({
|
url: strurl,
|
type: "post",
|
dataType: "json",
|
data: {
|
Action: "RTData_4731",
|
AjaxFlag: true
|
},
|
success: function (value) {
|
ConfigData = value;
|
var a = [];
|
var b=[];
|
for(var i =0;i<value.length;i++){
|
a .push(value[i].Doppm);
|
b.push(value[i].Date)
|
}
|
myChart.setOption({
|
xAxis:{
|
data:b
|
},
|
series:{
|
data:a
|
}
|
});
|
}
|
})
|
|
function randomData() {
|
now = new Date(+now + oneDay);
|
value = value + Math.random() * 21 - 10;
|
return {
|
name: now.toString(),
|
value: [
|
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
|
Math.round(value)
|
]
|
}
|
}
|
|
var data = [];
|
var now = +new Date(1997, 9, 3);
|
var oneDay = 24 * 3600 * 1000;
|
var value = Math.random() * 1000;
|
for (var i = 0; i < 1000; i++) {
|
data.push(randomData());
|
}
|
|
var option = {
|
// title: {
|
// text: '动态数据 + 时间坐标轴'
|
// },
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params) {
|
params = params[0];
|
var date = new Date(params.name);
|
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
|
},
|
axisPointer: {
|
animation: false
|
}
|
},
|
xAxis: {
|
type: 'time',
|
splitLine: {
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'value',
|
boundaryGap: [0, '100%'],
|
splitLine: {
|
show: false
|
}
|
},
|
series: [{
|
name: '模拟数据',
|
type: 'line',
|
showSymbol: false,
|
hoverAnimation: false,
|
data: data
|
}]
|
};
|
|
|
|
// for (var i = 0; i < 5; i++) {
|
// data.shift();
|
// data.push(randomData());
|
// }
|
//
|
// myChart.setOption({
|
// series: [{
|
// data: data
|
// }]
|
// });
|
|
myChart.setOption(option)
|
window.onresize = function () {
|
|
myChartContainer();
|
myChart.resize();
|
};
|
})
|
</script>
|
</html>
|
