hs
/
jsgkj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
							<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ include file="../../common.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>港口吞吐量分析</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css"	href="${app }/static/css/public.css" />
	<link rel="stylesheet" type="text/css"	href="${app }/static/css/other.css" />
	<script type="text/javascript" src="${app }/static/js/highcharts.js"></script>
	<script type="text/javascript" src="${app }/static/js/highcharts-3d.js"></script>
	<script type="text/javascript" src="${app }/static/js/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	initChart();
	initSelect();
	iFrameHeightIframe('${menuid}');//自适应高度
});
function initSelect(){
	if('${tjx}'!=''){
		$("#tjx").val('${tjx}');
	}
	if('${zzbl}'!=''){
		$("#zzbl").val('${zzbl}');
	}
}
function submitGyhzttlForm(){
	if($("#tjx").val() == 'gy'){
		$("#gyhzttlfxform").attr("action","${app }/gyhzttlfx/gymtttl/main");
	}else{
		$("#gyhzttlfxform").attr("action","${app }/gyhzttlfx/hzmtttl/main");
	}
	$("#gyhzttlfxform").submit();
}
function initChart(){
	var ttl = ${ttl};
	var month = ${dateList};
	var bl = ${bl}
	$('#container').highcharts({
		chart: {
			zoomType: 'xy'
	    },
	    title: {
	        text: '货物吞吐量分析'
	    },
	    /* subtitle: {副标题
	    	text: 'Source: WorldClimate.com'
	    }, */
	    xAxis: [{
	        categories: month,//['Jan', 'Feb', 'Mar', 'Apr', 'May'],
	        crosshair: true
	    }],
	    yAxis: [{ // Primary yAxis
	        labels: {
	            format: '{value}%',
	            style: {
	                color: Highcharts.getOptions().colors[1]
	            }
	        },
	        title: {
	            text: '百分比',
	            style: {
	                color: Highcharts.getOptions().colors[1]
	            }
	        }
	    }, { // Secondary yAxis
	        title: {
	           text: '货物吞吐量',
               style: {
	                color: Highcharts.getOptions().colors[0]
	            }
	        },
	        labels: {
	            format: '{value}吨',
	            style: {
	                color: Highcharts.getOptions().colors[0]
	            }
	        },
	        opposite: true
	    }],
	    tooltip: {
	        shared: true
        },
	    legend: {
	        layout: 'vertical',
	        align: 'left',
	        x: 120,
	        verticalAlign: 'top',
            y: 100,
            floating: true,
	        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
	    },
        series: [{
        	name: '吞吐量',
	        type: 'column',
	        yAxis: 1,
	        data: ttl,//[49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
	        tooltip: {
	            valueSuffix: '吨'
            }
        }, {
	        name: '百分比',
	        type: 'spline',
	        data: bl,
	        tooltip: {
                valueSuffix: '%'
            }
	    }]
	});
}
</script>
</head>

<body>

<form id="gyhzttlfxform" method="post" style="margin-top: 30px"> 
	<div>
		<table class="search_table" cellpadding="0" cellspacing="0">
			<tr>
				<th width="11%"></th>
				<th width="22%"></th>
				<th width="11%"></th>
				<th width="22%"></th>
				<th width="12%"></th>
				<th width="22%"></th>
			</tr>
			<tr>
				<td class="right">
					请选择统计项：&nbsp;
				</td>
				<td>
					<span><select id="tjx" name="tjx" class="form-control" style="width: 80%">
						<option value="gy">公用码头吞吐量</option>
						<option value="hz">货主码头吞吐量</option>
					</select></span>
				</td>
				<td class="right">
					选择日期：&nbsp;
				</td>
				<td>
					<input id="startDate" class="Wdate" style="width:80%;" name="startDate"  value="${startDate}"  type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM'})">
				</td>
				<td class="middle">~</td>
				<td>
					<input id="endDate" class="Wdate" style="width:80%;" name="endDate" value="${endDate}" type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM'})">	                
				</td>
			</tr>
			<tr>
				<td class="right">
					请选择增长比率：&nbsp;
				</td>
				<td>
					<span><select id="zzbl" name="zzbl" class="form-control" style="width: 80%">
						<option value="tb">同比</option>
						<option value="hb">环比</option>
						<option value="zs">增速</option>
					</select></span>
				</td>
				<td></td>
				<td></td>
				<td></td>
				<td>
					<a class="btn btn-default btn-sm" href="#" onclick="submitGyhzttlForm()"> 
						<i class="glyphicon glyphicon-search"></i>查询
					</a>
				</td>
			</tr>
		</table>
	</div>
</form>
	<div id="container" style="min-width:400px;height:400px"></div>

</body>
</html>