yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECahrt 示例</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css">
		<style>
			body,
			.mui-content {
				background-color: #ffffff;
			}
			
			.mui-card {
				position: fixed;
				left: 0;
				right: 0;
				top: 45px;
				bottom: 0;
			}
			
			.chart,
			.mui-card-content {
				/*height: 450px;*/
				margin: 0px;
				padding: 0px;
				position: absolute;
				left: 0;
				right: 0;
				top: 45px;
				bottom: 0;
				/*min-height: 450px;
			    min-width: 320px;*/
			}
			
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			
			h5:first-child {
				margin-top: 0;
				font-weight: 100;
			}
			.mui-switch.mui-active:before{
				content: "横屏";
			}
			.mui-switch:before {
				content: "竖屏";
			}
			.mui-switch.mui-active {
			    border-color: #89dfff;
			    background-color: #24b2e7;
			}
		</style>
		<script src="../js/mui.min.js"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">详情</h1>
		</header>
		<div class="mui-content">
			<!--<div class="mui-card">-->
			<!--页眉，放置标题-->
			<div class="mui-card-header">
				<h5>环境温度(°C)</h5>
				<!--<button id="switchBtn">竖屏</button>-->
				<!--<div class="mui-switch">
				  <div class="mui-switch-handle"></div>
				</div>-->
			</div>
			<!--内容区-->
			<div class="mui-card-content">
				<div class="chart" id="lineChart"></div>
			</div>
			<!--</div>-->

		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/echarts.min.js"></script>
		<script>
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				console.log(equipId)

				// 1基于准备好的dom，初始化echarts实例
				var lineChart = echarts.init(document.getElementById('lineChart'));
				// 指定图表的配置项和数据
				var lineOption = {
					tooltip: {
						trigger: 'axis',
						extraCssText: 'transform: rotate(90deg)',
						formatter: function(params) {
						if(params.length > 1) {
							var returnData = '';
							var time = '';
							for(var g in params) {
								time = params[g].axisValue;
								if(params[g].seriesIndex == 0){
									returnData += params[g].seriesName + ':' + params[g].value + '°C<br/>';
								}else{
									returnData += params[g].seriesName + ':' + params[g].value + '%<br/>';
								}
							}
							return time + '<br/>' + returnData;
						}
					}
					},
					legend: {
						data: ['环境温度', '环境湿度'],
					},
					xAxis: {
						type: 'value', //数据
						position: 'top', //x 轴的位置【top bottom】
						nameRotate: -90, //坐标轴名字旋转，角度值。
						axisLabel: { //坐标轴刻度标签的相关设置。
							rotate: 90 //刻度标签旋转的角度，
						},
						scale: true, //是否是脱离 0 值比例

					},
					dataZoom: [{
						type: 'inside',
						backgroundColor: "rgba(47,69,84,0)",
						yAxisIndex: [0]
					}],
					yAxis: {
						type: 'category',
						inverse: 'true', //是否是反向坐标轴。
						axisLabel: {
							rotate: -90
						},
						type: 'category',
						boundaryGap: false,
					},
					series: [{
						name: '环境温度',
						type: 'line',
						smooth: true, //是否平滑曲线显示
						itemStyle: {
							normal: {
								color: '#6ecdfe'
							}
						}
					}, {
						name: '环境湿度',
						type: 'line',
						smooth: true, //是否平滑曲线显示
						itemStyle: {
							normal: {
								color: '#5689f2'
							}
						}
					}]
				};
				//请求图表数据：
				$.ajax({
					url: 'http://120.27.222.26/cbd_report_detail_chart',
					type: 'post',
					data: {
						req: 'data',
						id:equipId
					},
					success: function(data) {
						console.log(data)
//						sessionStorage.setItem("scdData", data);
						var temp = eval('(' + data + ')');
						var at = [],
							ah = [],
							time = [],
							cv = [],
							bv = [],
							ct = [];
						for(var i = 0; i < temp.length; i++) {
							at.unshift(Number(temp[i].at / 10).toFixed(1));
							ah.unshift(Number(temp[i].ah / 10).toFixed(1));
							cv.unshift((Number(temp[i].cv) / 1000).toFixed(1));
							bv.unshift((Number(temp[i].bv) / 1000).toFixed(1));
							ct.unshift(Number(temp[i].ct));
							time.unshift(temp[i].tim);
						}
						lineOption.series[0].data = at;
						lineOption.series[1].data = ah;
						lineOption.yAxis.data = time;

						if(!temp.length) {
							lineOption.series[0].data = [0];
							lineOption.yAxis.data = ['暂无数据'];
						}

						// 使用刚指定的配置项和数据显示图表。
						setTimeout(function() {
							lineChart.setOption(lineOption);
						})
					}
				})
			})
		</script>
	</body>

</html>