DataVisualization / DepotManagement · 提交

转到一个项目

作者 小范
提交 0871d7a6559219c802eb34189fb0ca28a042e4fe 1 个父辈 b34b8bf5

仓库数据可视化管理

内嵌 并排对比
正在显示 3 个修改的文件 包含 1214 行增加 和 0 行删除
  1 +.body{
  2 + background-size: 100% 100%;
  3 +}
  4 +.title{
  5 + font-color: #FFFFF0;
  6 + font-size: 26px
  7 +}.title1{
  8 + font-color:#FFFFF0;
  9 + font-size: 20px
  10 + }
  11 +
1 .dataAll{ 12 .dataAll{
2 width: 100%; 13 width: 100%;
3 height: 28%; 14 height: 28%;
@@ -49,6 +60,12 @@ @@ -49,6 +60,12 @@
49 .maginS01{ 60 .maginS01{
50 /*margin-top:11% !important;*/ 61 /*margin-top:11% !important;*/
51 } 62 }
  63 +.new{
  64 + width: 250%;
  65 + height: 40%;
  66 + box-sizing: border-box;
  67 + border:0px
  68 +}
52 .dataAllBorder01{ 69 .dataAllBorder01{
53 width: 100%; 70 width: 100%;
54 height: 100%; 71 height: 100%;
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <link href="css/BigData.css" rel="stylesheet" type="text/css" />
  5 + <link href="css/index.css" rel="stylesheet" type="text/css" />
  6 + <link href="css/index12.css" rel="stylesheet" type="text/css" />
  7 + <script src="js/jquery.js"></script>
  8 + <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  9 + <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
  10 + <link href="css/Security_operation.css" rel="stylesheet" type="text/css" />
  11 + <link rel="stylesheet" href="js/artDialog/skins/default.css" type="text/css"/>
  12 + <script src="js/laydate.js"></script>
  13 + <script src="js/Home_page.js"></script>
  14 + <meta charset="UTF-8">
  15 + <title>大数据管理平台</title>
  16 +
  17 +</head>
  18 +<body class="body" background="img/warehouse.png" style="position: relative;height: 1100px;width: 100%;background-attachment: fixed;">
  19 +<!--<iframe src="https://www.thingjs.com/pp/eb1ef62559ddf908beadaddd" style="margin: 0;padding: 0" height="1100px" width="100%" ></iframe>-->
  20 +<div class="title" style="position: absolute;top:50px;left: 120px;color:#F0F0F0">仓库数据可视化管理
  21 +
  22 +</div>
  23 +<div class="title1" style="position: absolute;top:75px;left: 80px;color:#F0F0F0">Visual management of warehouse data
  24 +</div>
  25 +<div class="data_left01" style="position: absolute;top:130px;left: 10px">
  26 + <div class="new">
  27 + <p class="data_chart" id="Package"></p>
  28 + </div>
  29 + <div class="dataAll" style="display: none">
  30 + <div class="dataAllBorder01">
  31 + <div class="dataAllBorder02">
  32 + <div class="data_tit1">本月航班量</div>
  33 + <div class="data_chart" id="buyTime"></div>
  34 + </div>
  35 + </div>
  36 + </div>
  37 +<!-- <div class="dataAll" style="display: none">-->
  38 +<!-- <div class="dataAllBorder01">-->
  39 +<!-- <div class="dataAllBorder02">-->
  40 +<!-- <div class="data_tit1">今日航班单量</div>-->
  41 +<!-- <p class="data_chart" id="Package01"></p>-->
  42 +<!-- </div>-->
  43 +<!-- </div>-->
  44 +<!-- </div>-->
  45 + <div class="dataAll" style="display: none">
  46 + <div class="dataAllBorder01">
  47 + <div class="dataAllBorder02">
  48 + <div class="data_tit1">本月航司单量</div>
  49 + <p class="data_chart" id="rode01"></p>
  50 + </div>
  51 + </div>
  52 + </div>
  53 +</div>
  54 +<div class="data_left01" style="position: absolute;top:70px;right: 370px">
  55 + <div class="dataAllBorder02" id="cage_cl" style="float: right;width: 120%;height: 30%">
  56 + <div class="analysis">今日货物信息：</div>
  57 + <ul class="data_show_box">
  58 + <li class="data_cage">0</li>
  59 + <li class="data_cage">1</li>
  60 + <li class="data_cage" style="background-image: none;">,</li>
  61 + <li class="data_cage">3</li>
  62 + <li class="data_cage">3</li>
  63 + <li class="data_cage">2</li>
  64 + </ul>
  65 + <div class="depart_number_box">
  66 + <ul class="depart_number_cage">
  67 + <li class="depart_name">北货站：</li>
  68 + <li class="depart_number">3,238</li>
  69 + </ul>
  70 + <ul class="depart_number_cage">
  71 + <li class="depart_name">西货站：</li>
  72 + <li class="depart_number">1,630</li>
  73 + </ul>
  74 + <ul class="depart_number_cage" style="margin-bottom: 0px;">
  75 + <li class="depart_name">老货站：</li>
  76 + <li class="depart_number">4,251</li>
  77 + </ul>
  78 + <ul class="depart_number_cage" style="margin-bottom: 0px;">
  79 + <li class="depart_name">军投：</li>
  80 + <li class="depart_number">24</li>
  81 + </ul>
  82 + </div>
  83 + </div>
  84 +</div>
  85 +<div class="data_left01" style="position: absolute;top:70px;right: 10px" align="center">
  86 + <div class="dataAll" style="float: right;width: 80%;height: 30%">
  87 + <div class="dataAllBorder01">
  88 + <div class="dataAllBorder02">
  89 + <div class="data_tit1">今日货物信息</div>
  90 + <p class="data_chart" id="Package01"></p>
  91 + </div>
  92 + </div>
  93 + </div>
  94 + <div class="dataAll" style="float: right;width: 80%;height: 45%" >
  95 + <div class="dataAllBorder01">
  96 + <div class="dataAllBorder02">
  97 + <div class="data_tit1">本周货物信息</div>
  98 + <p class="data_chart" id="actionBook"></p>
  99 + </div>
  100 + </div>
  101 + </div>
  102 +<!-- <div class="dataAll" style="float: right;display: none">-->
  103 +<!-- <div class="dataAllBorder01">-->
  104 +<!-- <div class="dataAllBorder02">-->
  105 +<!-- <div class="data_tit1">本年申报量</div>-->
  106 +<!-- <p class="data_chart" id="bookBmonth"></p>-->
  107 +<!-- </div>-->
  108 +<!-- </div>-->
  109 +<!-- </div>-->
  110 +<!-- <div class="dataAll maginS" style="float: right;display: none">-->
  111 +<!-- <div class="dataAllBorder01">-->
  112 +<!-- <div class="dataAllBorder02">-->
  113 +<!-- <div class="data_tit1">申报类型分析</div>-->
  114 +<!-- <p class="data_chart" id="seaAbook01"></p>-->
  115 +<!-- </div>-->
  116 +<!-- </div>-->
  117 +<!-- </div>-->
  118 +</div>
  119 +<div class="data_left02" style="position: absolute;top:825px;left:0px">
  120 + <div class="dataAll maginS" style="float: left;width: 20%;height: 20%">
  121 + <div class="dataAllBorder01">
  122 + <div class="dataAllBorder02">
  123 + <div class="data_tit1">在库总货量（进港）</div>
  124 + <p class="data_chart" id="bookAret"></p>
  125 + </div>
  126 + </div>
  127 + </div>
  128 + <div class="dataAll" style="float: left;width: 20%;height: 20%">
  129 + <div class="dataAllBorder01">
  130 + <div class="dataAllBorder02">
  131 + <div class="data_tit1">理货信息</div>
  132 + <p class="data_chart" id="whearAbook"></p>
  133 + </div>
  134 + </div>
  135 + </div>
  136 + <div class="dataAll02" style="float: left;width: 20%;height: 20%">
  137 + <div class="dataAllBorder01">
  138 + <div class="dataAllBorder02">
  139 + <div class="data_tit1">货物状态</div>
  140 + <p class="data_chart" id="rodeAbook"></p>
  141 + </div>
  142 + </div>
  143 + </div>
  144 +
  145 + <div class="dataAll" style="float: left;width: 19%;height: 20%">
  146 + <div class="dataAllBorder01">
  147 + <div class="dataAllBorder02">
  148 + <div class="data_tit1">在库总货量（出港）</div>
  149 + <p class="data_chart" id="bookBmonth"></p>
  150 + </div>
  151 + </div>
  152 + </div>
  153 + <div class="dataAll maginS" style="float: left;width: 20%;height: 20%">
  154 + <div class="dataAllBorder01">
  155 + <div class="dataAllBorder02">
  156 + <div class="data_tit1">货物状态</div>
  157 + <p class="data_chart" id="seaAbook01"></p>
  158 + </div>
  159 + </div>
  160 + </div>
  161 +</div>
  162 +
  163 +<script src="js/echarts-all.js"></script>
  164 +<script>
  165 + function EventClick(){
  166 + $(".check_increase").removeClass("check_increase_act");
  167 + $("#over_hide1").show().siblings().hide();
  168 + $(".check_decrease").show();
  169 + $("#cage_cl").hide();
  170 + $("#map_title_innerbox").hide();
  171 + $("#cage_cl1").show();
  172 +// $("#over_hide").show();
  173 + $("#map_title_innerbox1").show();
  174 + $(".addition_check_in").hide();
  175 + $("#car_check_in").hide();
  176 + BootstrapTable();
  177 + }
  178 + function cancel(e){
  179 + $(".check_increase").removeClass("check_increase_act");
  180 + $("#over_hide").show().siblings().hide();
  181 + $(".check_decrease").show();
  182 + $("#cage_cl").show();
  183 + $("#cage_cl1").hide();
  184 +// $("#cage_cl").show();
  185 +// $("#over_hide1").show();
  186 +// $("#map_title_innerbox").show();
  187 + BootstrapTable();
  188 + }
  189 + $(function(){
  190 + var myChart = echarts.init($("#Package")[0]);
  191 + var labelTop = {
  192 + normal : {
  193 + label : {
  194 + show : true,
  195 + position : 'center',
  196 + formatter : '{b}',
  197 + textStyle: {
  198 + baseline : 'bottom'
  199 + }
  200 + },
  201 + labelLine : {
  202 + show : false
  203 + }
  204 + }
  205 + };
  206 + var labelFromatter = {
  207 + normal : {
  208 + label : {
  209 + formatter : function (params){
  210 + return 10000 - params.value
  211 + },
  212 + textStyle: {
  213 + baseline : 'top'
  214 + }
  215 + }
  216 + },
  217 + }
  218 + var labelBottom = {
  219 + normal : {
  220 + color: '#ccc',
  221 + label : {
  222 + show : true,
  223 + position : 'center'
  224 + },
  225 + labelLine : {
  226 + show : false
  227 + }
  228 + },
  229 + emphasis: {
  230 + color: 'rgba(0,0,0,0)'
  231 + }
  232 + };
  233 + var radius = [40, 55];
  234 + option = {
  235 + legend: {
  236 + x : 'center',
  237 + y : 'center',
  238 + data:[
  239 + ],
  240 + },
  241 + title : {
  242 + text: '',
  243 + x: 'center'
  244 + },
  245 + toolbox: {
  246 + show : false,
  247 + feature : {
  248 + dataView : {show: true, readOnly: false},
  249 + magicType : {
  250 + show: true,
  251 + type: ['pie', 'funnel'],
  252 + option: {
  253 + funnel: {
  254 + width: '20%',
  255 + height: '30%',
  256 + itemStyle : {
  257 + normal : {
  258 + label : {
  259 + formatter : function (params){
  260 + return 'other\n' + params.value + '%\n'
  261 + },
  262 + textStyle: {
  263 + baseline : 'middle'
  264 + }
  265 + }
  266 + },
  267 + }
  268 + }
  269 + }
  270 + },
  271 + restore : {show: true},
  272 + saveAsImage : {show: true}
  273 + }
  274 + },
  275 + series : [
  276 + {
  277 + type : 'pie',
  278 + center : ['10%', '30%'],
  279 + radius : radius,
  280 + x: '0%', // for funnel
  281 + itemStyle : labelFromatter,
  282 + data : [
  283 + {name:'other', value:46, itemStyle : labelBottom},
  284 + {name:'在库总货量', value:54,itemStyle : labelTop}
  285 + ]
  286 + },
  287 + {
  288 + type : 'pie',
  289 + center : ['30%', '30%'],
  290 + radius : radius,
  291 + x:'20%', // for funnel
  292 + itemStyle : labelFromatter,
  293 + data : [
  294 + {name:'other', value:56, itemStyle : labelBottom},
  295 + {name:'已理货', value:44,itemStyle : labelTop}
  296 + ]
  297 + },
  298 + {
  299 + type : 'pie',
  300 + center : ['50%', '30%'],
  301 + radius : radius,
  302 + x:'40%', // for funnel
  303 + itemStyle : labelFromatter,
  304 + data : [
  305 + {name:'other', value:65, itemStyle : labelBottom},
  306 + {name:'未理货', value:35,itemStyle : labelTop}
  307 + ]
  308 + },
  309 + {
  310 + type : 'pie',
  311 + center : ['70%', '30%'],
  312 + radius : radius,
  313 + x:'60%', // for funnel
  314 + itemStyle : labelFromatter,
  315 + data : [
  316 + {name:'other', value:70, itemStyle : labelBottom},
  317 + {name:'已放行', value:30,itemStyle : labelTop}
  318 + ]
  319 + },
  320 + {
  321 + type : 'pie',
  322 + center : ['90%', '30%'],
  323 + radius : radius,
  324 + x:'80%', // for funnel
  325 + itemStyle : labelFromatter,
  326 + data : [
  327 + {name:'other', value:73, itemStyle : labelBottom},
  328 + {name:'待提货', value:27,itemStyle : labelTop}
  329 + ]
  330 + },
  331 + ]
  332 + };
  333 +
  334 +
  335 + myChart.setOption(option);
  336 + });
  337 +
  338 +
  339 +
  340 +
  341 + $(function(){
  342 + var myChart = echarts.init($("#buyTime")[0]);
  343 + var option = {
  344 + tooltip: { //提示框，鼠标悬浮交互时的信息提示
  345 + show: true,
  346 + trigger: 'axis'
  347 + },
  348 + grid: {
  349 + x: 46,
  350 + y:30,
  351 + x2:30,
  352 + y2:40,
  353 + borderWidth: 0
  354 + },
  355 + legend: {
  356 + data: [],
  357 + orient: 'vertical',
  358 + textStyle: { fontWeight: 'bold', color: '#a4a7ab' }
  359 + },
  360 +
  361 + calculable: false,
  362 + xAxis: [
  363 + {
  364 + type: 'category',
  365 + boundaryGap: false,
  366 + data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
  367 + splitLine: {
  368 + show: false
  369 + },
  370 + axisLabel: {
  371 + show: true,
  372 + textStyle: {
  373 + color: '#a4a7ab',
  374 + align: 'center'
  375 + }
  376 + }
  377 + }
  378 +
  379 + ],
  380 + yAxis: [
  381 + {
  382 + type: 'value',
  383 + splitLine: {
  384 + show: false
  385 + },
  386 + axisLabel: {
  387 + show: true,
  388 + textStyle: {
  389 + color: '#a4a7ab',
  390 + align: 'right'
  391 + }
  392 + }
  393 + }
  394 + ],
  395 + series: [
  396 + {
  397 + name: '',
  398 + type: 'line',
  399 + stack: '24小时购买时间',
  400 + data: [120, 132, 101, 146, 199, 230, 210, 230, 240, 256, 278, 300,120, 132, 101, 146, 199, 230, 210, 230, 240, 256, 278, 300],
  401 + itemStyle: {
  402 + normal: {
  403 + color: '#02bcbc'
  404 + }
  405 + }
  406 + }
  407 + ]
  408 + };
  409 +
  410 + myChart.setOption(option);
  411 + });
  412 + $(function(){
  413 + var myChart = echarts.init($("#Package01")[0]);
  414 + option = {
  415 + legend: {
  416 + orient : 'vertical',
  417 + x : 'left',
  418 + data:['西货站','老货站','军投'],
  419 + textStyle:{
  420 + color:"#e9ebee"
  421 +
  422 + }
  423 + },
  424 + tooltip : {
  425 + trigger: 'axis'
  426 + },
  427 + toolbox: {
  428 + show : true,
  429 + feature : {
  430 + mark : {show: true},
  431 + dataView : {show: true, readOnly: false},
  432 + magicType : {
  433 + show: true,
  434 + type: ['pie', 'funnel'],
  435 + option: {
  436 + funnel: {
  437 + x: '25%',
  438 + width: '50%',
  439 + funnelAlign: 'left',
  440 + max: 1548
  441 + }
  442 + }
  443 + },
  444 + restore : {show: true},
  445 + saveAsImage : {show: true}
  446 + }
  447 + },
  448 + calculable : true,
  449 + series : [
  450 + {
  451 + name:'航班',
  452 + type:'pie',
  453 + radius : '55%',
  454 + tooltip : {
  455 + trigger: 'item',
  456 + formatter: '{a} <br/>{b} : {c} ({d}%)'
  457 + },
  458 + center: ['50%', '60%'],
  459 + data:[
  460 + {
  461 + value:335,
  462 + name:'西货站',
  463 + itemStyle: {
  464 + normal: {
  465 + color:"#1afffd"
  466 + }
  467 + }},
  468 + {
  469 + value:310,
  470 + name:'老货站',
  471 + itemStyle: {
  472 + normal: {
  473 + color:"#2e7cff"
  474 + }
  475 + }},
  476 + {
  477 + value:234,
  478 + name:'北货站',
  479 + itemStyle: {
  480 + normal: {
  481 + color:"#ffcb89"
  482 + }
  483 + }}
  484 + ]
  485 + }
  486 + ]
  487 + };
  488 +
  489 +
  490 + myChart.setOption(option);
  491 + });
  492 + $(function(){
  493 + var myChart = echarts.init($("#rode01")[0]);
  494 + option = {
  495 + tooltip : {
  496 + trigger: 'axis'
  497 + },
  498 + legend: {
  499 + orient : 'vertical',
  500 + x : 'left',
  501 + data:['CV','RU','CX','KA','5Y','5X','ET','CF'], textStyle:{
  502 + color:"#e9ebee"
  503 +
  504 + }
  505 + },
  506 + calculable : false,
  507 + series : [
  508 +
  509 + {
  510 + name:'航司',
  511 + type:'pie',
  512 + tooltip : {
  513 + trigger: 'item',
  514 + formatter: '{a} <br/>{b} : {c} ({d}%)'
  515 + },
  516 + radius : '60%',
  517 + center: ['50%', '60%'],
  518 + roseType : 'area',
  519 + x: '50%', // for funnel
  520 + max: 40, // for funnel
  521 + sort : 'ascending', // for funnel
  522 + data:[
  523 + {value:10, name:'CF',
  524 + itemStyle: {
  525 + normal: {
  526 + color:"#45c0ff"
  527 + }
  528 + }},
  529 + {value:5, name:'ET',
  530 + itemStyle: {
  531 + normal: {
  532 + color:"#e15828"
  533 + }
  534 + }},
  535 + {value:15, name:'5X',
  536 + itemStyle: {
  537 + normal: {
  538 + color:"#ff81cb"
  539 + }
  540 + }},
  541 + {value:25, name:'5Y',
  542 + itemStyle: {
  543 + normal: {
  544 + color:"#2e7cff"
  545 + }
  546 + }},
  547 + {value:20, name:'KA',
  548 + itemStyle: {
  549 + normal: {
  550 + color:"#feb602"
  551 + }
  552 + }},
  553 + {value:35, name:'CX',
  554 + itemStyle: {
  555 + normal: {
  556 + color:"#ff7d0a"
  557 + }
  558 + }},
  559 + {value:30, name:'RU',
  560 + itemStyle: {
  561 + normal: {
  562 + color:"#1afffd"
  563 + }
  564 + }},
  565 + {value:40, name:'CV',
  566 + itemStyle: {
  567 + normal: {
  568 + color:"#2e7cff"
  569 + }
  570 + }}
  571 + ]
  572 + }
  573 + ]
  574 + };
  575 +
  576 +
  577 + myChart.setOption(option);
  578 + });
  579 + $(function(){
  580 + var myChart = echarts.init($("#bookAret")[0]);
  581 + option = {
  582 +
  583 + tooltip : {
  584 + trigger: 'axis'
  585 + },
  586 + grid: {
  587 + x: 46,
  588 + y:30,
  589 + x2:30,
  590 + y2:40,
  591 + borderWidth: 0
  592 + },
  593 + legend: {
  594 + data:['总量','异常'],
  595 + textStyle:{
  596 + color:"#e9ebee"
  597 +
  598 + }
  599 + },
  600 +
  601 + calculable : false,
  602 + xAxis : [
  603 + {
  604 + type : 'category',
  605 + data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  606 + axisLabel: {
  607 + show: true,
  608 + textStyle: {
  609 + color: '#a4a7ab',
  610 + align: 'center'
  611 + },
  612 + splitLine: {
  613 + show: false
  614 + },
  615 + }
  616 + }
  617 +
  618 + ],
  619 + yAxis : [
  620 + {
  621 + type : 'value',
  622 + axisLabel: {
  623 + show: true,
  624 + textStyle: {
  625 + color: '#a4a7ab',
  626 + align: 'right'
  627 + }
  628 + },
  629 + splitLine: {
  630 + show: false
  631 + },
  632 + }
  633 + ],
  634 + series : [
  635 + {
  636 + name:'申报异常',
  637 + type:'bar',
  638 + data:[100, 80, 136, 150, 120, 56, 200, 162, 105, 63, 169, 236],
  639 + markPoint : {
  640 + data : [
  641 + {type : 'max', name: '最大值'},
  642 + {type : 'min', name: '最小值'}
  643 + ]
  644 + },
  645 + markLine : {
  646 + data : [
  647 + {type : 'average', name: '平均值'}
  648 + ]
  649 + }
  650 + },
  651 + {
  652 + name:'申报正常',
  653 + type:'bar',
  654 + data:[983, 820, 1236, 930, 1600, 1032, 890, 1300, 1921, 984, 1960, 2630],
  655 + markPoint : {
  656 + data : [
  657 + {name : '月最高', value : 2630, xAxis: 12, yAxis: 2630, symbolSize:18},
  658 + {name : '月最低', value : 820, xAxis: 2, yAxis: 830}
  659 + ]
  660 + },
  661 + markLine : {
  662 + data : [
  663 + {type : 'average', name : '平均值'}
  664 + ]
  665 + }
  666 + }
  667 + ]
  668 + };
  669 +
  670 +
  671 + myChart.setOption(option);
  672 + });
  673 + $(function(){
  674 + var myChart = echarts.init($("#rodeAbook")[0]);
  675 + option = {
  676 + tooltip : {
  677 + trigger: 'axis'
  678 + },
  679 + grid: {
  680 + x: 46,
  681 + y:30,
  682 + x2:30,
  683 + y2:20,
  684 + borderWidth: 0
  685 + },
  686 +
  687 + calculable : false,
  688 + legend: {
  689 + data:['已放行','待提货','已提离'],
  690 + textStyle:{
  691 + color:"#e9ebee"
  692 +
  693 + }
  694 + },
  695 + xAxis : [
  696 + {
  697 + type : 'category',
  698 + data : ['周一','周二','周三','周四','周五','周六','周日'],
  699 + splitLine: {
  700 + show: false
  701 + },
  702 + axisLabel: {
  703 + show: true,
  704 + textStyle: {
  705 + color: '#a4a7ab',
  706 + align: 'center'
  707 + }
  708 + }
  709 +
  710 + }
  711 + ],
  712 + yAxis : [
  713 + {
  714 + type : 'value',
  715 + name : '舱单量',
  716 + axisLabel : {
  717 + formatter: '{value} ',
  718 + textStyle: {
  719 + color: '#a4a7ab',
  720 + align: 'right'
  721 + }
  722 + },
  723 + splitLine: {
  724 + show: false
  725 + },
  726 + },
  727 + {
  728 + type : 'value',
  729 + name : '航班',
  730 + axisLabel : {
  731 + formatter: '{value} ',
  732 + textStyle: {
  733 + color: '#a4a7ab',
  734 + align: 'right'
  735 + }
  736 + },
  737 + splitLine: {
  738 + show: false
  739 + },
  740 + },
  741 +
  742 + ],
  743 + series : [
  744 +
  745 + {
  746 + name:'进港',
  747 + type:'bar',
  748 + stack: '单量',
  749 + data:[120, 132, 101, 134, 90, 230, 210],
  750 + itemStyle: {
  751 + normal: {
  752 + color:"#ffcb89"
  753 + }
  754 + }
  755 + },
  756 + {
  757 + name:'出港',
  758 + type:'bar',
  759 + stack: '单量',
  760 + data:[220, 232, 301, 234, 190, 330, 210],
  761 + itemStyle: {
  762 + normal: {
  763 + color:"#005ea1"
  764 + }
  765 + }
  766 + },
  767 +
  768 + {
  769 + name:'航班',
  770 + type:'line',
  771 + yAxisIndex: 1,
  772 + data:[20, 12, 10, 14, 20, 30, 10],
  773 + itemStyle: {
  774 + normal: {
  775 + color:"#0ad5ff"
  776 + }
  777 + }
  778 + }
  779 + ]
  780 + };
  781 +
  782 + myChart.setOption(option);
  783 + });
  784 + $(function(){
  785 + var myChart = echarts.init($("#bookBmonth")[0]);
  786 + var option = {
  787 + tooltip: { //提示框，鼠标悬浮交互时的信息提示
  788 + show: true,
  789 + trigger: 'axis'
  790 + },
  791 + grid: {
  792 + x: 46,
  793 + y:30,
  794 + x2:30,
  795 + y2:40,
  796 + borderWidth: 0
  797 + },
  798 + legend: {
  799 + data: [],
  800 + orient: 'vertical',
  801 + textStyle: { fontWeight: 'bold', color: '#a4a7ab' }
  802 + },
  803 +
  804 + calculable: false,
  805 + xAxis: [
  806 + {
  807 + type: 'category',
  808 + boundaryGap: false,
  809 + data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  810 + splitLine: {
  811 + show: false
  812 + },
  813 + axisLabel: {
  814 + show: true,
  815 + textStyle: {
  816 + color: '#a4a7ab',
  817 + align: 'center'
  818 + }
  819 + }
  820 + }
  821 +
  822 + ],
  823 + yAxis: [
  824 + {
  825 + type: 'value',
  826 + splitLine: {
  827 + show: false
  828 + },
  829 + axisLabel: {
  830 + show: true,
  831 + textStyle: {
  832 + color: '#a4a7ab',
  833 + align: 'right'
  834 + }
  835 + }
  836 + }
  837 + ],
  838 + series: [
  839 + {
  840 + name: '',
  841 + type: 'line',
  842 + stack: '申报正常',
  843 + data:[983, 820, 1236, 930, 1600, 1032, 890, 1300, 1921, 984, 1960, 2630],
  844 + itemStyle: {
  845 + normal: {
  846 + color: '#02bcbc'
  847 + }
  848 + }
  849 + }
  850 + ]
  851 + };
  852 +
  853 + myChart.setOption(option);
  854 + });
  855 + $(function(){
  856 + var myChart = echarts.init($("#seaAbook01")[0]);
  857 + option = {
  858 +
  859 + tooltip : {
  860 + trigger: 'axis'
  861 + },
  862 + legend: {
  863 + orient : 'vertical',
  864 + x : 'left',
  865 + data:['已组板','未组板','已放行','未放行','已驶离'], textStyle:{
  866 + color:"#e9ebee"
  867 +
  868 + }
  869 + },
  870 +
  871 + calculable : false,
  872 + series : [
  873 +
  874 + {
  875 + name:'舱单申报总量',
  876 + type:'pie',
  877 + radius : '70%',
  878 + center: ['50%', '60%'],
  879 + tooltip : {
  880 + trigger: 'item',
  881 + formatter: '{a} <br/>{b} : {c} ({d}%)'
  882 + },
  883 + splitLine:{show: true},
  884 + roseType : 'area',
  885 + x: '50%', // for funnel
  886 + max: 40, // for funnel
  887 + sort : 'ascending', // for funnel
  888 + data:[
  889 + {value:2560, name:'已组板',
  890 + itemStyle: {
  891 + normal: {
  892 + color:"#2e7cff"
  893 + }
  894 + }},
  895 + {value:3690, name:'未组板',
  896 + itemStyle: {
  897 + normal: {
  898 + color:"#ffcb89"
  899 + }
  900 + }},
  901 + {value:5690, name:'已放行',
  902 + itemStyle: {
  903 + normal: {
  904 + color:"#005ea1"
  905 + }
  906 + }},
  907 + {value:6312, name:'未放行',
  908 + itemStyle: {
  909 + normal: {
  910 + color:"#0ad5ff"
  911 + }
  912 + }},
  913 + {value:6312, name:'已驶离',
  914 + itemStyle: {
  915 + normal: {
  916 + color:"#0ad5ff"
  917 + }
  918 + }}
  919 + ]
  920 + }
  921 + ]
  922 + };
  923 +
  924 +
  925 + myChart.setOption(option);
  926 + });
  927 + $(function(){
  928 + var myChart = echarts.init($("#actionBook")[0]);
  929 + option = {
  930 + tooltip : {
  931 + trigger: 'axis'
  932 + },
  933 + grid: {
  934 + x: 46,
  935 + y:30,
  936 + x2:30,
  937 + y2:20,
  938 + borderWidth: 0
  939 + },
  940 +
  941 + calculable : false,
  942 + legend: {
  943 + data:['老货站','西货站','军投','北货站'],
  944 + textStyle:{
  945 + color:"#e9ebee"
  946 +
  947 + }
  948 + },
  949 + xAxis : [
  950 + {
  951 + type : 'category',
  952 + splitLine : {show : false},
  953 + data : ['周一','周二','周三','周四','周五','周六','周日'],
  954 + axisLabel: {
  955 + show: true,
  956 + textStyle: {
  957 + color: '#fff',
  958 + align: 'center'
  959 + }
  960 + }
  961 + }
  962 + ],
  963 + yAxis : [
  964 + {
  965 + type : 'value',
  966 + position: 'right',
  967 + splitLine : {show : false},
  968 + axisLabel: {
  969 + show: true,
  970 + textStyle: {
  971 + color: '#fff',
  972 + align: 'center'
  973 + }
  974 + }
  975 + }
  976 + ],
  977 + series : [
  978 + {
  979 + name:'老货站',
  980 + type:'bar',
  981 + data:[320, 332, 301, 334, 390, 330, 320],
  982 + itemStyle: {
  983 + normal: {
  984 + color:"#2e7cff"
  985 + }
  986 + }
  987 + },
  988 + {
  989 + name:'西货站',
  990 + type:'bar',
  991 + tooltip : {trigger: 'item'},
  992 + stack: '广告',
  993 + data:[120, 132, 101, 134, 90, 230, 210],
  994 + itemStyle: {
  995 + normal: {
  996 + color:"#feb602"
  997 + }
  998 + }
  999 + },
  1000 + {
  1001 + name:'军投',
  1002 + type:'bar',
  1003 + tooltip : {trigger: 'item'},
  1004 + stack: '广告',
  1005 + data:[220, 182, 191, 234, 290, 330, 310],
  1006 + itemStyle: {
  1007 + normal: {
  1008 + color:"#ffcb89"
  1009 + }
  1010 + }
  1011 + },
  1012 + {
  1013 + name:'北货站',
  1014 + type:'bar',
  1015 + tooltip : {trigger: 'item'},
  1016 + stack: '广告',
  1017 + data:[150, 232, 201, 154, 190, 330, 410],
  1018 + itemStyle: {
  1019 + normal: {
  1020 + color:"#005ea1"
  1021 + }
  1022 + }
  1023 + },
  1024 +
  1025 + {
  1026 + name:'申报总单量',
  1027 + type:'line',
  1028 + data:[862, 1018, 964, 1026, 1679, 1600, 1570],
  1029 + itemStyle: {
  1030 + normal: {
  1031 + color:"#0ad5ff"
  1032 + }
  1033 + }
  1034 + },
  1035 +
  1036 + {
  1037 + name:'货物细分',
  1038 + type:'pie',
  1039 + tooltip : {
  1040 + trigger: 'item',
  1041 + formatter: '{a} <br/>{b} : {c} ({d}%)'
  1042 + },
  1043 + center: [100,80],
  1044 + radius : [0, 30],
  1045 + itemStyle :　{
  1046 + normal : {
  1047 + labelLine : {
  1048 + length : 20
  1049 + }
  1050 + }
  1051 + },
  1052 + data:[
  1053 + {value:1048, name:'普货',
  1054 + itemStyle: {
  1055 + normal: {
  1056 + color:"#1afffd"
  1057 + }
  1058 + }},
  1059 + {value:251, name:'电子',
  1060 + itemStyle: {
  1061 + normal: {
  1062 + color:"#2e7cff"
  1063 + }
  1064 + }},
  1065 + {value:147, name:'医疗',
  1066 + itemStyle: {
  1067 + normal: {
  1068 + color:"#ffcb89"
  1069 + }
  1070 + }},
  1071 + {value:102, name:'数码',
  1072 + itemStyle: {
  1073 + normal: {
  1074 + color:"#005ea1"
  1075 + }
  1076 + }}
  1077 + ]
  1078 + }
  1079 + ]
  1080 + };
  1081 +
  1082 +
  1083 + myChart.setOption(option);
  1084 + });
  1085 + $(function(){
  1086 + var myChart = echarts.init($("#whearAbook")[0]);
  1087 + option = {
  1088 + tooltip : {
  1089 + trigger: 'axis'
  1090 + },
  1091 + grid: {
  1092 + x: 46,
  1093 + y:30,
  1094 + x2:30,
  1095 + y2:20,
  1096 + borderWidth: 0
  1097 + },
  1098 +
  1099 + calculable : false,
  1100 + legend: {
  1101 + data:['已理货','未理货','异常'],
  1102 + textStyle:{
  1103 + color:"#e9ebee"
  1104 +
  1105 + }
  1106 + },
  1107 + xAxis : [
  1108 + {
  1109 + type : 'category',
  1110 + data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  1111 + splitLine: {
  1112 + show: false
  1113 + },
  1114 + axisLabel: {
  1115 + show: true,
  1116 + textStyle: {
  1117 + color: '#a4a7ab',
  1118 + align: 'center'
  1119 + }
  1120 + }
  1121 +
  1122 + }
  1123 + ],
  1124 + yAxis : [
  1125 + {
  1126 + type : 'value',
  1127 +
  1128 + name : '调拨转运量',
  1129 + axisLabel : {
  1130 + formatter: '{value} ',
  1131 + textStyle: {
  1132 + color: '#a4a7ab',
  1133 + align: 'right'
  1134 + }
  1135 + },
  1136 + splitLine: {
  1137 + show: false
  1138 + },
  1139 + },
  1140 + {
  1141 + type : 'value',
  1142 + name : '舱单申报量',
  1143 + axisLabel : {
  1144 + formatter: '{value} 件',
  1145 + textStyle: {
  1146 + color: '#a4a7ab',
  1147 + align: 'right'
  1148 + }
  1149 + },
  1150 + splitLine: {
  1151 + show: false
  1152 + },
  1153 + },
  1154 +
  1155 + ],
  1156 + series : [
  1157 +
  1158 + {
  1159 + name:'调拨',
  1160 + type:'bar',
  1161 + data:[20, 49, 70, 232, 256, 767, 1356, 1622, 36, 200, 64, 33],
  1162 + itemStyle: {
  1163 + normal: {
  1164 + color:"#0ad5ff"
  1165 + }
  1166 + }
  1167 + },
  1168 + {
  1169 + name:'国际转运',
  1170 + type:'bar',
  1171 + data:[26, 59, 90, 264, 287, 707, 1756, 1822, 487, 188, 60, 23],
  1172 + itemStyle: {
  1173 + normal: {
  1174 + color:"#005ea1"
  1175 + }
  1176 + }
  1177 + },
  1178 + {
  1179 + name:'进口申报量',
  1180 + type:'line',
  1181 + yAxisIndex: 1,
  1182 + data:[200, 220, 330, 450, 630, 1020, 2030, 2340, 2300, 1650, 12000, 6200],
  1183 + itemStyle: {
  1184 + normal: {
  1185 + color:"#1afffd"
  1186 + }
  1187 + }
  1188 + }
  1189 + ]
  1190 + };
  1191 +
  1192 + myChart.setOption(option);
  1193 + });
  1194 +</script>
  1195 +
  1196 +</body>
  1197 +</html>