今天完成的是手机端的开发，很简单，DCloud混合开发，用ajax来获取数据，然后EChart显示数据。代码地址：github.com/klren0312/s… 2017.3.26

DCloud手机端

1.DCloud

主要用的是他们家的MUI。

1）介绍官方介绍：最接近原生APP体验的高性能前端框架网址：dev.dcloud.net.cn/mui/

2）开发工具非常好用的前端开发工具，HBuilder。

QQ截图20170326210431.png

2.相关代码

1）AJAX请求代码使用的是mui封装好的函数

mui.getJSON('http://10.127.5.188:3000/tem',function(data){
	lineChart.setOption({	 			    	       
	    	series: [{
	   	    // 根据名字对应到相应的系列
	    	    name: '温度',
	     	    data: data
	     	}]
	});
	temChart.setOption({
		series:[{
			data: [{value: data[data.length-1], name: '温度'}]
		}]
	})				
});
	
mui.getJSON('http://10.127.5.188:3000/hum',function(data){
	lineChart.setOption({	 			    	       
	   	series: [{
	   		// 根据名字对应到相应的系列
	   		name: '湿度',
	   		data: data
	   	}]
    });
    					
    humChart.setOption({
    	series:[{
    		data: [{value: data[data.length-1], name: '湿度'}]
    	}]
    })
});

2）创建子界面

mui.init({
	swipeBack: false,
	statusBarBackground: '#f7f7f7',
	tureConfig: {
		doubletap: true
	},
	subpages: [{
		id: 'list',
		url: 'list.html',
		styles: {
			top: '45px',
			bottom: 0,
			bounce: 'vertical'
		}
	}]
});

3）页面跳转代码

document.getElementById('device1').addEventListener('tap', function() {
  	mui.openWindow({
  		url:'pages/device1.html',
  		id:'pages/device1.html',
  		show:{
  			aniShow:"pop-in"
  	    }
  	})
});