echars实时获取数据库内容

setInterval(function(){
	 $.ajax({
		 url:'/getRealtimeValue/',
		 type:'post',
		 data:{"projectName":projectname,"taskName":taskname,"cameraID":cameraId,}
	}).done(function(data){
		 console.log(data);
		 //alert(data);
		 //console.log(data.length);
		 console.log(data.X.length)
		 if(data){
				var m=0;
				for(var i=0;i<10;i++) //一次显示多少数据
				{
					if(m<1000)  //坐标轴最多显示的数据个数
					{
						dataX.push(data.X[i]);
						console.log('dataX:'+dataX);
						console.log('dataX.length:'+dataX.length);
						dataY.push(data.Y[i]);
						//console.log('dataY:'+dataY);
						//console.log('dataY.length:'+dataY.length);
						date.push(data.date[i]);
						//console.log('date:'+date);
						//console.log('date.length:'+date.length);
						m+=1;
					}
					else
					{
						break;
					}

					 myChart.hideLoading();
					 myChart.setOption({
						xAxis:{
							data:date,
						},
						series:[
							{
								name:"X坐标",
								type:'line',
								data:dataX,
								smooth:true,
								itemStyle: {  // 折线拐点的样式
									normal: {
									  color: '#20aefc'  // 拐线拐点的颜色
									}
								},
								lineStyle: {  // 线条的样式
									normal: {
									  color: 'blue',  // 折线的颜色
									}
								}
							},
							{
								name:"Y坐标",
								type:'line',
								smooth:true,
								data:dataY,
								itemStyle: {  // 折线拐点的样式
									normal: {
									  color: 'red'  // 拐线拐点的颜色
									}
								},

								lineStyle: {  // 线条的样式
									normal: {
									  color: '#20aefc',  // 折线的颜色
									}
								}
							},
					 ]});
				}

		 if(dataX.length>30)  //x轴更新
		 {
			console.log('切片');
			dataX.splice(0,5);
			console.log('dataX:'+dataX);
			dataY.splice(0,5);
			date.splice(0,5);
		 }
		}
	});

},10000);

猜你喜欢

转载自blog.csdn.net/weixin_38383877/article/details/81837175
今日推荐