hs
/
jsgkj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!DOCTYPE html >
<html >
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.text.SimpleDateFormat"%>
 <%@ include file="../../common.jsp"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>集装箱吞吐量统计</title>
</head>
<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/exporting.js"></script>
<script type="text/javascript" src="${app }/static/js/highcharts-3d.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		iFrameHeightIframe('${menuid}');//自适应高度
		$('.hxselectpicker').selectpicker({
    		width:'80%'
    	});
	});

	
	$(function () {
		var list = '${list}';
		var zttl=[];
		var name=[];
		var hb=[];
		var tb=[]
		var aa='${zcl}';
		var bb=-+'${zcl}';
		
	    $.each(JSON.parse(list), function (n, value) {
	    	name[n]=value.tjmonth+"月";
	    	zttl[n]=value.ttl;
	    	hb[n]=value.hb;
	    	tb[n]=value.tb;
	  	});
	    $('#container').highcharts({
	    	title:{
	    		text:""
	    	},
	        chart: {
	            zoomType: 'xy'
	        },
	        xAxis: [{
	            categories: eval(name)
	        }],
	        yAxis: [{ // Primary yAxis
	            labels: {
	                formatter: function() {
	                    return this.value +'%';
	                },
	                style: {
	                    color: '#89A54E'
	                }
	            },
	            title: {
	                text: '同比增长率',
	                style: {
	                    color: '#89A54E'
	                }
	            },
	            opposite: true,
	            plotLines:[{
	                color:'red',           //线的颜色，定义为红色
	                dashStyle:'ShortDash',     //默认值，这里定义为实线
	                value:aa,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
	                width:2                //标示线的宽度，2px
	            },{
	                color:'yellow',           //线的颜色，定义为红色
	                dashStyle:'ShortDash',     //默认值，这里定义为实线
	                value:bb,               //定义在那个值上显示标示线，这里是在x轴上刻度为1的值处垂直化一条线
	                width:2                //标示线的宽度，2px
	            }]

	        }, { // Secondary yAxis
	        	min:0,
	            gridLineWidth: 0,
	            title: {
	                text: '吞吐量',
	                style: {
	                    color: '#4572A7'
	                }
	            },
	            labels: {
	                formatter: function() {
	                    return this.value +' 万吨';
	                },
	                style: {
	                    color: '#4572A7'
	                }
	            }

	        }, { // Tertiary yAxis
	            gridLineWidth: 0,
	            title: {
	                text: '环比增长率',
	                style: {
	                    color: '#AA4643'
	                }
	            },
	            labels: {
	                formatter: function() {
	                    return this.value +' %';
	                },
	                style: {
	                    color: '#AA4643'
	                }
	            },
	            opposite: true
	        }],
	        tooltip: {
	            shared: true
	        },
	        series: [{
	            name: '吞吐量',
	            color: '#4572A7',
	            type: 'column',
	            yAxis: 1,
	            data: eval('['+zttl+']'),
	            tooltip: {
	                valueSuffix: ' 万吨'
	            }

	        }, {
	            name: '环比增长率',
	            type: 'spline',
	            color: '#AA4643',
	            yAxis: 2,
	            data: eval('['+hb+']'),
	            marker: {
	                enabled: false
	            },
	            dashStyle: 'shortdot',
	            tooltip: {
	                valueSuffix: ' %'
	            }

	        }, {
	            name: '同比增长率',
	            color: '#89A54E',
	            type: 'spline',
	            data: eval('['+tb+']'),
	            tooltip: {
	                valueSuffix: ' %'
	            }
	        }]
	    });
	});	
	
	function searchMain(){
		$("#jzxttltjform").submit();
	}
</script>
<style type="text/css">
.main_table td{
text-align:left;
padding-left:20px;
width:50px;
}
</style>
</head>
<body>
<div style="margin-top:30px;">
<form action="${app }/jzxttltj/main" id="jzxttltjform" method="post"> 	
<table class="search_table" cellpadding="0" cellspacing="0" align="center" >
		<tr>
				<th width="11%"></th>	
				<th width="22%"></th>
				<th width="11%"></th>
				<th width="22%"></th>
				<th width="12%"></th>
		</tr>
                      
			    <tr align="center">
				<td align="right" >报告时间起：&nbsp;</td>
                <td align="left" ><input id="d4311" class="Wdate" name="startDate" value="${startDate}"  type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM',maxDate: '#F{$dp.$D(\'d4312\',{d:0})}'})"></td>
                <td align="right">报告时间止：&nbsp;</td>
                <td align="left" ><input id="d4312" class="Wdate" name="endDate" value="${endDate}" type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM',minDate: '#F{$dp.$D(\'d4311\',{d:0})}'})"></td>
               <th width="12%"></th>
               </tr>
               <tr>
                <tr align="center">
                <td align="right" >航线分类：&nbsp;</td>
              	<td align="left" >
              		<select class='hxselectpicker' name="hx" id="hx">
			            	<option></option>
			            	<option value="1" <c:if test="${hx ==1}">selected</c:if>>国际航线</option>
			            	<option value="2" <c:if test="${hx ==2}">selected</c:if>>内支线</option>
			            	<option value="3" <c:if test="${hx ==3}">selected</c:if>>国内航线</option>
			            	</select>
              	</td>
              	<td align="right" ></td>
              	<td align="left" ></td>
                <td align="left">
               	<a class="btn btn-default btn-sm" href="#" onclick="searchMain()">
				<i class="glyphicon glyphicon-search"></i>检索</a>
                </td>
		 	   </tr>
         <tr>
         </tr>
</table>
</form>
</div>
<h2 align="center" style="margin-top:20px;" ><font style="font-size:16px;color:#196794;font-family:微软雅黑;font-weight: bold;">
（${startDate}月——${endDate}月）集装箱吞吐量统计图</font></h2>
<br>
<div id="container" style="min-width: 200px; min-height:300px; margin: 0 auto;"></div>
</body>
</html>