|
|
@@ -0,0 +1,147 @@
|
|
|
+<%@ 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">
|
|
|
+ 请选择统计项：
|
|
|
+ </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">
|
|
|
+ 选择日期：
|
|
|
+ </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">
|
|
|
+ 请选择增长比率：
|
|
|
+ </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>
|
ld_jiangxf