动态 Echarts 温湿度示意图 背景可以随温度变化

效果展示

 源代码（h5）

    
    	
    
       
    
    


    
    
	
久爱物联网 Echarts 动态温湿度示意图
    

	

		

			久爱物联网 Echarts 动态示意图，可以随温度变背景色的曲线图
		
		

			时间轴做了处理支持24小时制（一般随系统格式显示的）更新频率5秒钟
		
	

动态更新真实数据的方法

	setInterval(function () {
		var option = myChart.getOption();
		//var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');//'chinese',{hour12:false}
		var data0 = option.series[0].data;//温度
		var data1 = option.series[1].data;//湿度
		//动态更新曲线图值
			data0.shift();//温度
			data0.push(dhtwd);//	(Math.random() * 35 + 5).toFixed(1) - 0
			if(dhtwd<=27)option.backgroundColor='rgba(188,188,255,0.8)';//不同温度区域 背景色随着变
			if(dhtwd>27)option.backgroundColor='rgba(255,230,205,0.8)';
			if(dhtwd>30)option.backgroundColor='rgba(255,200,0,0.8)';
			if(dhtwd>32)option.backgroundColor='rgba(255,150,0,0.8)';
			data1.shift();					//湿度
			data1.push(dhtsd);				//(Math.random() * 90 + 0).toFixed(1) - 0
			option.xAxis[0].data.shift();	//x坐标轴
			option.xAxis[0].data.push(dhttime);//axisData
			//固定替换数据区(数据必须是数组)
			// option.series[0].data = dataWD;
			// option.series[1].data = dataSD;			
		 myChart.setOption(option);
		}, 10000);//更新10s频率

可以自己发挥改进！

我的实际应用案例

 

 

 

实现功能及应用说明