hs
/
jsgkj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
							<!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"
	src="${app }/static/biz/js/gkyxtjyfx/gkjcssjsfx/gkjcssjsfxmain.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		gkjcssjsfx.main.init();
		gkjcssjsfx.main.xmlx = '${xmlxid}';
		gkjcssjsfx.main.tzlx = '${tzlxid}';
		initXmlxSelect('xmlxsel', gkjcssjsfx.main.xmlx, '80%');
		initTzlxSelect('tzlxsel', gkjcssjsfx.main.tzlx, '80%')
	});

	$(function() {
		iFrameHeightIframe('${menuid}');//自适应高度
		var list = '${tzjhgllist}';
		var aqname = [];
		var aqsum = [];
		$.each(JSON.parse(list), function(n, value) {
			aqname[n] = value.szd;
			aqsum[n] = value.ztz;
		});
		$('#container')
				.highcharts(
						{
							chart : {
								zoomType : 'xy'
							},
							plotOptions : {
								series : {
									pointWidth : 16
								}
							},
							credits : {//右下角的文本  
								enabled : true,
								position : {//位置设置  
									align : 'right',
									x : -10,
									y : -10
								},
								href : "",//点击文本时的链接  
								style : {
									color : 'blue'
								},
								text : ""//显示的内容  
							},
							title : {
								text : '　'
							},
							lang : {
								contextButtonTitle : "图表菜单",
								resetRoom : "重置",
								printChart : "打印图片",
								downloadJPEG : "下载JPEG 图片",
								downloadPDF : "下载PDF文档",
								downloadPNG : "下载PNG 图片",
								downloadSVG : "下载SVG 矢量图",
								exportButtonTitle : "导出图片",
							},
							xAxis : [ {
								categories : aqname,
								labels : {
									rotation : 0,
									style : {
										color : '#262626',//刻度颜色
										fontSize : '12px', //刻度字体大小
										fontFamily : '宋体'
									}
								}
							} ],
							yAxis : [ { // Primary yAxis
								labels : {
									format : '{value}',
									style : {
										color : '#262626'
									}
								},
								title : {
									text : '',
									style : {
										color : '#262626'
									}
								}
							}, { // Secondary yAxis
								title : {
									text : '',
									style : {
										color : '#262626'
									}
								},
								labels : {
									format : '{value}',
									style : {
										color : '#262626'
									}
								},
								opposite : true
							} ],
							tooltip : {
								shared : true
							},
							legend : {
								align : 'left',
								x : 50,
								verticalAlign : 'top',
								y : -15,
								floating : true,
								backgroundColor : 'transparent'
							},
							series : [ {
								name : '<font style="font-size:12px;color:#5e5d5d;">总投资</font>',
								color : '#5F49E4',
								type : 'column',
								yAxis : 1,
								data : eval('[' + aqsum + ']'),
								tooltip : {
									valueSuffix : '万元'
								}

							} ]
						});
	});
	/**
	 * highcharts 主题
	 */

	// Load the fonts
	/*  Highcharts.createElement('link', {
	 	href: 'http://fonts.googleapis.com/css?family=Signika:400,700',
	 	rel: 'stylesheet',
	 	type: 'text/css'
	 }, null, document.getElementsByTagName('head')[0]); */

	// Add the background image to the container
	/* Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
		proceed.call(this);
		this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
	}); */

	Highcharts.theme = {
		colors : [ "#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee",
				"#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF",
				"#aaeeee" ],
		chart : {
			backgroundColor : null,
			style : {
				fontFamily : "Signika, serif"
			}
		},
		title : {
			style : {
				color : 'black',
				fontSize : '16px',
				fontWeight : 'bold'
			}
		},
		subtitle : {
			style : {
				color : 'black'
			}
		},
		tooltip : {
			borderWidth : 0
		},
		legend : {
			itemStyle : {
				fontWeight : 'bold',
				fontSize : '13px'
			}
		},
		xAxis : {
			labels : {
				style : {
					color : '#6e6e70'
				}
			}
		},
		yAxis : {
			labels : {
				style : {
					color : '#6e6e70'
				}
			}
		},
		plotOptions : {
			series : {
				shadow : true
			},
			candlestick : {
				lineColor : '#404048'
			},
			map : {
				shadow : false
			}
		},

		// Highstock specific
		navigator : {
			xAxis : {
				gridLineColor : '#D0D0D8'
			}
		},
		rangeSelector : {
			buttonTheme : {
				fill : 'white',
				stroke : '#C0C0C8',
				'stroke-width' : 1,
				states : {
					select : {
						fill : '#D0D0D8'
					}
				}
			}
		},
		scrollbar : {
			trackBorderColor : '#C0C0C8'
		},

		// General
		background2 : '#E0E0E8'

	};

	// Apply the theme
	Highcharts.setOptions(Highcharts.theme);
</script>
</head>
<body>
<div class="box">
	<div class="box-content">
	<div style="margin-top:20px;background-color:#f4f4f5;border: 1px solid #d0d1d6;height:70px"  >
		<form action="${app }/gkjcssjsfx/main" id="gkjcssjsfxform"
			method="post">
			<input type="hidden" name="first" value="1">
			<table class="search_table" cellpadding="0" cellspacing="0"
				align="center">
				<tr>
					<th width="10%"></th>
					<th width="15%"></th>
					<th width="10%"></th>
					<th width="10%"></th>
					<th width="10%"></th>
					<th width="25%"></th>
					<th width="10%"></th>
				</tr>
				<tr align="center">
					<td align="right"><font
						style="font-size: 14px; color: #196794; font-family: 微软雅黑;">项目类型：&nbsp;</font></td>
					<td align="left"><span id="xmlxsel"></span></td>
					<td align="right"><font
						style="font-size: 14px; color: #196794; font-family: 微软雅黑;">投资类型：&nbsp;</font></td>
					<td align="left"><span id="tzlxsel"></span></td>
					<td align="right"><font
						style="font-size: 14px; color: #196794; font-family: 微软雅黑;">起止时间：&nbsp;</font></td>
					<td align="left">
						<table style="width: 90%;">
							<tr>
								<td><input id="d4311" class="Wdate" style="width: 100%;"
									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><span>~</span></td>
								<td><input id="d4312" class="Wdate" style="width: 100%;"
									name="endDate" value="${endDate }" type="text"
									onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM',minDate: '#F{$dp.$D(\'d4311\',{d:0})}'})">
								</td>
							</tr>
						</table>
					</td>
					<td align="right"><a class="btn btn-default btn-sm" href="#"
						onclick="gkjcssjsfx.main.search()"> <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;">
			项目投资统计图</font>
	</h2>
	<div id="container"
		style="min-width: 200px; min-height: 300px; margin: 0 auto;"></div>
	<div style="margin: 28px 0px; height: 40%; min-height: 200px;">
		<table class="table_ud">
			<tr>
				<c:if test="${flag!=1 }">
					<th>所在港口</th>
				</c:if>
				<c:if test="${flag!=0 }">
					<th>所在港区</th>
				</c:if>
				<th>总投资（万元）</th>
			</tr>
			<c:forEach items="${tzjhgltj}" var="tzjhgltjlist">
				<tr>
					<td>${tzjhgltjlist.szd}</td>
					<td>${tzjhgltjlist.ztz}</td>
				</tr>
			</c:forEach>
		</table>
	</div>
	</div>
</div>	
</body>
</html>