hs
/
jsgkj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!DOCTYPE html >
<html >
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../common/base.jsp"%>
<%@ 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="${basePath }/css/public.css" />
<script type="text/javascript" src="${basePath }/static/js/highcharts.js"></script>
<script type="text/javascript" src="${basePath }/static/js/exporting.js"></script>
<script type="text/javascript" src="${basePath }/static/js/highcharts-3d.js"></script>
<script>
$(function () {
	var colors=["#B9D3EE", "#FF6633"];
	Highcharts.getOptions().colors = Highcharts.map(colors, function(color) {
		if(color=="#FF6633"){
			return "#FF6633";
				}
		return {
		    radialGradient: { cx: 0.5,cy:0,r:1.5},
		    stops: [
		        [0, color],
		        [1, Highcharts.Color(color).brighten(1).get('rgb')]
		    ]
		};
		});
    $('#container').highcharts({
        chart: {
            type: 'column',
            margin: 80,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 0,
                depth: 70
            }
        },
        credits:{//右下角的文本  
            enabled: true,  
            position: {//位置设置  
                align: 'right',  
                x: -10,  
                y: -10  
            },  
            href: "",//点击文本时的链接  
            style: {  
                color:'blue'  
            },  
            text: ""//显示的内容  
        },  
        title: {
            text: '<font style="font-size:30px;font-weight:bold;">2015年度单船吞吐量统计图</font>'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        xAxis:  [{
            categories: [
                     	'<font style="font-size:14px;color:black;">南京</font>',
						'<font style="font-size:14px;color:black;">无锡</font>',
						'<font style="font-size:14px;color:black;">徐州</font>', 
						'<font style="font-size:14px;color:black;">常州</font>', 
						'<font style="font-size:14px;color:black;">苏州</font>', 
						'<font style="font-size:14px;color:black;">南通</font>',
						'<font style="font-size:14px;color:black;">南通内河</font>',
						'<font style="font-size:14px;color:black;">连云港</font>',
						'<font style="font-size:14px;color:black;">连云港内河</font>',
						'<font style="font-size:14px;color:black;">淮安</font>',
						'<font style="font-size:14px;color:black;">盐城</font>',
						'<font style="font-size:14px;color:black;">盐城内河</font>',
						'<font style="font-size:14px;color:black;">扬州</font>',
						'<font style="font-size:14px;color:black;">镇江</font>',
						'<font style="font-size:14px;color:black;">镇江内河</font>',
						'<font style="font-size:14px;color:black;">泰州</font>',
						'<font style="font-size:14px;color:black;">宿迁</font>',
						'<font style="font-size:14px;color:black;">泰兴</font>'
           ],
                     crosshair: true
                 }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
                style: {
                    color: "#000"
                }
            },
            title: {
                text: '单船作业吞吐量（万吨）',
                style: {
                    color: "#000"
                }
            }
        }, { // Secondary yAxis
            title: {
                text: '单船作业申报数量（个）',
                style: {
                    color: "#000"
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: "#000"
                }
            },
            opposite: true
        }],
        
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: 'transparent'
        },
        series: [{
            name: '单船作业申报数量（个）',
            type: 'column',
            yAxis: 1,
            data: [91083, 45586, 439, 1265, 83998,72999,557,22751,336,5893,445,3490,10116,33582,1880,45644,137,158],
            tooltip: {
                valueSuffix: '个'
            }

        }, {
            name: '单船作业吞吐量（万吨）',
            type: 'spline',
            data: [24001.8712,9119.1682,22.8192,239.4849,3034.2109, 9130.8577, 12.3453,4251.1521,102.1251,446.3511,135.1511,210.2840,1126.6680,5210.1314,42.5001,7739.2149,3.1297,22.1425],
            tooltip: {
                valueSuffix: '万吨'
            }
        }]
    });
}); 
</script>
</head>
<body >
<div id="container" style="min-width: 200px; margin-top:20px;"></div>
	<div>
		<table class="table table-striped table-bordered">
			<tr class="fisrtTr">
				<th width="20%">所在地</th>
				<th width="40%" >单船作业申报数量（个）</th>
				<th width="40%" >单船作业吞吐量（万吨）</th>
			</tr>
			<tr>
				<td>南京</td>
				<td style="padding-right:18%;text-align: right;">91083</td>
				<td style="padding-right:18%;text-align: right;">24001.8712</td>
			</tr>
			<tr>
				<td>无锡</td>
				<td style="padding-right:18%;text-align: right;">45586</td>
				<td style="padding-right:18%;text-align: right;">9119.1682</td>
			</tr>
			<tr>
				<td>徐州</td>
				<td style="padding-right:18%;text-align: right;">439</td>
				<td style="padding-right:18%;text-align: right;">22.8192</td>
			</tr>
			<tr>
				<td>常州</td>
				<td style="padding-right:18%;text-align: right;">1265</td>
				<td style="padding-right:18%;text-align: right;">239.4849</td>
			</tr>
			<tr>
				<td>苏州</td>
				<td style="padding-right:18%;text-align: right;">83998</td>
				<td style="padding-right:18%;text-align: right;">3034.2109</td>
			</tr>
			<tr>
				<td>南通</td>
				<td style="padding-right:18%;text-align: right;">72999</td>
				<td style="padding-right:18%;text-align: right;">9130.8577</td>
			</tr>
			<tr>
				<td>南通内河</td>
				<td style="padding-right:18%;text-align: right;">557</td>
				<td style="padding-right:18%;text-align: right;">12.3453</td>
			</tr>
			<tr>
				<td>连云港</td>
				<td style="padding-right:18%;text-align: right;">22751</td>
				<td style="padding-right:18%;text-align: right;">4251.1521</td>
			</tr>
			<tr>
				<td>连云港内河</td>
				<td style="padding-right:18%;text-align: right;">336</td>
				<td style="padding-right:18%;text-align: right;">102.1251</td>
			</tr>
			<tr>
				<td>淮安</td>
				<td style="padding-right:18%;text-align: right;">5893</td>
				<td style="padding-right:18%;text-align: right;">446.3511</td>
			</tr>
			<tr>
				<td>盐城</td>
				<td style="padding-right:18%;text-align: right;">445</td>
				<td style="padding-right:18%;text-align: right;">135.1511</td>
			</tr>
			<tr>
				<td>盐城内河</td>
				<td style="padding-right:18%;text-align: right;">3490</td>
				<td style="padding-right:18%;text-align: right;">210.2840</td>
			</tr>
			<tr>
				<td>扬州</td>
				<td style="padding-right:18%;text-align: right;">10116</td>
				<td style="padding-right:18%;text-align: right;">1126.6680</td>
			</tr>
			<tr>
				<td>镇江</td>
				<td style="padding-right:18%;text-align: right;">33582</td>
				<td style="padding-right:18%;text-align: right;">5210.1314</td>
			</tr>
			<tr>
				<td>镇江内河</td>
				<td style="padding-right:18%;text-align: right;">1880</td>
				<td style="padding-right:18%;text-align: right;">42.5001</td>
			</tr>
			<tr>
				<td>泰州</td>
				<td style="padding-right:18%;text-align: right;">45644</td>
				<td style="padding-right:18%;text-align: right;">7739.2149</td>
			</tr>
			<tr>
				<td>宿迁</td>
				<td style="padding-right:18%;text-align: right;">137</td>
				<td style="padding-right:18%;text-align: right;">3.1297</td>
			</tr>
			<tr>
				<td>泰兴</td>
				<td style="padding-right:18%;text-align: right;">158</td>
				<td style="padding-right:18%;text-align: right;">22.1425</td>
			</tr>
		</table>
	</div>
</body>
</html>