hs
/
jsgkj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<%@ 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>
</head>
<script>
$(document).ready(function () {
	initChart();
});
function initChart(){
	var a = [10,20,30,40,50,60];
	$('#container').highcharts({
		chart: {
			zoomType: 'xy'
	    },
	    title: {
	        text: '货物吞吐量分析'
	    },
	    /* subtitle: {副标题
	    	text: 'Source: WorldClimate.com'
	    }, */
	    xAxis: [{
	        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
	                         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
	        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: a,//[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: ' mm'
            }
        }, {
	        name: '百分比',
	        type: 'spline',
	        data: a,//[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
	        tooltip: {
                valueSuffix: '°C'
            }
	    }]
	});
}

</script>
<body>
	<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 name="tjx" class="form-control" style="width: 80%">
						<option value="GK03010202000000000000000000">合计</option>
						<option value="GK03010202000010000000000000">进港</option>
						<option value="GK03010202000020000000000000">出港</option>
					</select></span>
				</td>
				<td class="right">
					选择日期：&nbsp;
				</td>
				<td>
					<input id="d4311" class="Wdate" style="width:80%;" name="xkzstartDate"  value="${xkzstartDate}"  type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM',maxDate: '#F{$dp.$D(\'d4312\',{d:0})}'})">
				</td>
				<td class="middle">~</td>
				<td>
					<input id="d4312" class="Wdate" style="width:80%;" name="xkzendDate" value="${xkzendDate}" type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM',minDate: '#F{$dp.$D(\'d4311\',{d:0})}'})">	                
				</td>
			</tr>
			<tr>
				<td class="right">
					请选择增长比率：&nbsp;
				</td>
				<td>
					<span><select name="zzbl" class="form-control" style="width: 80%">
						<option value="tb">同比</option>
						<option value="hb">环比</option>
						<option value="zs">增速</option>
					</select></span>
				</td>
			</tr>
		</table>
	</div>
	<div id="container" style="min-width:400px;height:400px"></div>
</body>
</html>