From 607671518f2b268ea1dffa2c623298c34085cbc8 Mon Sep 17 00:00:00 2001
From: dongxiaoyan <dongxiaoyan@192.168.11.154>
Date: Thu, 20 Dec 2018 19:27:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E9=A1=B5=E9=9D=A2=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dynamicpage/DynamicIndexController.java   |   19 +-
 .../views/dynamicpage/dynamicIndex.jsp        | 1497 +++++++++--------
 2 files changed, 824 insertions(+), 692 deletions(-)
diff --git a/src/main/java/com/nis/web/controller/dynamicpage/DynamicIndexController.java b/src/main/java/com/nis/web/controller/dynamicpage/DynamicIndexController.java
index 30b377244..270c2e129 100644
--- a/src/main/java/com/nis/web/controller/dynamicpage/DynamicIndexController.java
+++ b/src/main/java/com/nis/web/controller/dynamicpage/DynamicIndexController.java
@@ -101,14 +101,14 @@ public class DynamicIndexController extends BaseController {
 		
 		String nowString = DateUtils.formatDate(now, "yyyy-MM-dd HH:mm:ss");
 		String startString = DateUtils.formatDate(start, "yyyy-MM-dd HH:mm:ss");
-		/*nowString = "2018-12-05 00:00:00";
-		startString = "2018-12-04 17:00:00";*/
+		nowString = "2018-12-05 00:00:00";
+		startString = "2018-12-04 17:00:00";
 		String url = Constants.LOG_BASE_URL + Constants.TRAFFIC_AREA_STAT;
 		//String url = "http://localhost:8080/ntc/helloworld/test";
 		Map<String, Object> params = new HashMap<String, Object>();
 		params.put("searchReportStartTime", startString);
 		params.put("searchReportEndTime", nowString);
-		params.put("baseNum", baseNum);
+		//params.put("baseNum", baseNum);
 		
 		try {
 			String recv = HttpClientUtil.getMsg(url, params, null);
@@ -148,6 +148,17 @@ public class DynamicIndexController extends BaseController {
 			logger.error("解析出错", e);
 			results.clear();
 		}
+		/*if(results != null && results.size()<1){//伪造数据
+			results = null;
+			results = new ArrayList<>();
+			Map result = null;//new HashMap();
+			for(int i=0;i<hour*12;i++){
+				result = null;
+				result = new HashMap();
+				result.put("name", "Alamty");
+				result.put("data", t.get(area));
+			}
+		}*/
 		return results;
 	}
 	
@@ -174,7 +185,7 @@ public class DynamicIndexController extends BaseController {
 		params.put("searchReportStartTime", startString);
 		params.put("searchReportEndTime", nowString);
 		params.put("searchBusinessType", 1);
-		params.put("baseNum", baseNum);
+		//params.put("baseNum", baseNum);
 		
 		try {
 			String recv = HttpClientUtil.getMsg(url, params, null);
diff --git a/src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp b/src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp
index cc8056b20..4679773e7 100644
--- a/src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp
+++ b/src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp
@@ -1,4 +1,4 @@
-﻿<%@ page contentType="text/html;charset=UTF-8"%>
+﻿﻿<%@ page contentType="text/html;charset=UTF-8"%>
 <%@ include file="/WEB-INF/include/taglib.jsp"%>
 <html>
 <head>
@@ -282,7 +282,6 @@
 	
 	 <!-- </div> --> 
 <!-- </div> -->
-<!--  container-fiuled bootstrap全屏 -->
 <div class="main-container" id="main-container">
 			<div class="main-container-inner">
 				<!-- <div class="main_qftd">
@@ -393,7 +392,7 @@
 		<script type="text/javascript" src="${pageContext.request.contextPath}/static/login/numbergd/js/index.js"></script>
 		<!-- 数字特效 -->
 		
-		<script type="text/javascript">				
+		<script type="text/javascript">
 			var bodyHeight =  window.screen.height;
 			
 			/* 流量折线图 */
@@ -433,705 +432,827 @@
 			    }],
 			    globalCoord: false // 缺省为 false
 			}
-			function randomData() {
-			    value = Math.random() * 100;
-			    return {
-			        value: Math.round(value)
-			    }
+			
+			/* 数据流 */
+			var lines = [
+				    {
+				    	coords: [
+						            [46, 600],
+						            [830, 864]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [30, 600],
+						            [830, 864]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [100, 500],
+						            [800, 814]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [100, 500],
+						            [800, 814]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [150, 500],
+						            [830, 864]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#d29781'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [111, 566],
+						            [830, 864]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#d29781'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [247, 193],
+						            [830, 804]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#ebf546'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [10, 300],
+						            [830, 804]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#ebf546'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [10, 400],
+						            [830, 804]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#d29781'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [60, 400],
+						            [830, 804]
+						        ],
+						        effect: {
+						            period: 2,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [160, 200],
+						            [830, 804]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [160, 300],
+						            [830, 804]
+						        ],
+						        effect: {
+						            period: 2,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				   
+				]
+				
+				var line_option = {
+				    backgroundColor: 'rgba(255,255,255,0)',
+				    grid:{
+				        top: 10,
+				        bottom: 10,
+				        left: 10,
+				        right: 10,
+				        width: 682,
+				        height: 595,
+				    },
+				    xAxis: {
+				        show: false,
+				        min: 0,
+				        max: 1000,
+				        position: 'top',
+				        axisPointer: {
+				            show: false
+				        }
+				    },
+				    yAxis: {
+				        show: false,
+				        min: 0,
+				        max: 1000,
+				        axisPointer: {
+				            show: false
+				        }
+				    },
+				    
+				    // 线条动画
+				    series: [
+				        {
+				            type: 'lines',
+				            coordinateSystem: 'cartesian2d',
+				            zlevel: 1,
+				            
+				            // 动画效果
+				            effect: {
+				                show: true,
+				                period: 4, //特效动画的时间，单位为 s
+				                trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
+				                //color: '#d29781',
+				                symbolSize: 6
+				            },
+				            
+				            lineStyle: {
+				                normal: {
+				                    color: '#BF3EFF',
+				                    width: 0,
+				                    curveness: 0
+				                }
+				            },
+				            data: lines
+				        }
+				    ],
+				};
+			lines_Chart.setOption(line_option);
+			/* 数据流出 */
+			var lines_chu = [
+				    
+				    /* 出端 */
+				    {
+				    	coords: [
+						            [1, 801],
+						            [243,968]
+						        ],
+						        effect: {
+						            period: 1,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [23,756],
+						            [215, 878]
+						        ],
+						        effect: {
+						            period: 0.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [0, 764],
+						            [343,968]
+						        ],
+						        effect: {
+						            period: 1,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [2, 701],
+						            [363,968]
+						        ],
+						        effect: {
+						            period: 1,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [24, 653],
+						            [332, 912]
+						        ],
+						        effect: {
+						            period: 1,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [24, 603],
+						            [384, 873]
+						        ],
+						        effect: {
+						            period: 1,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [24, 553],
+						            [368, 781]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [24, 553],
+						            [337, 779]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				    {
+				    	coords: [
+						            [24, 453],
+						            [338, 727]
+						        ],
+						        effect: {
+						            period: 1.5,
+						        },	
+						        lineStyle: {
+		                            normal: {
+		                                color: '#119dd8'
+		                            }
+		                        }
+				    },
+				   
+				]
+				
+				var line_chu_option = {
+				    backgroundColor: 'rgba(255,255,255,0)',
+				    grid:{
+				        top: 10,
+				        bottom: 10,
+				        left: 10,
+				        right: 10,
+				        width: 682,
+				        height: 595,
+				    },
+				    xAxis: {
+				        show: false,
+				        min: 0,
+				        max: 1000,
+				        position: 'top',
+				        axisPointer: {
+				            show: false
+				        }
+				    },
+				    yAxis: {
+				        show: false,
+				        min: 0,
+				        max: 1000,
+				        axisPointer: {
+				            show: false
+				        }
+				    },
+				    
+				    // 线条动画
+				    series: [
+				        {
+				            type: 'lines',
+				            coordinateSystem: 'cartesian2d',
+				            zlevel: 1,
+				            
+				            // 动画效果
+				            effect: {
+				                show: true,
+				                period: 4, //特效动画的时间，单位为 s
+				                trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
+				                //color: '#d29781',
+				                symbolSize: 6
+				            },
+				            lineStyle: {
+				                normal: {
+				                    color: '#BF3EFF',
+				                    width: 0,
+				                    curveness: 0
+				                }
+				            },
+				            data: lines_chu
+				        }
+				    ],
+				};
+			lines_Chart_chu.setOption(line_chu_option);
+			
+			function getLineOption(n1, n2, d1, d2) {
+				var option = {
+					backgroundColor: "rgba(255,255,255,0)",
+				    tooltip: {
+				        show: false
+				    },
+				    grid:{
+				        left: 53,
+				    },
+				    xAxis: {
+				        type: 'time',
+				        boundaryGap: false,
+				        axisLine: {
+				            lineStyle: {
+				                color: '#4bbbf8',
+				                shadowColor: 'rgba(75, 211, 255, 0.5)',
+				                shadowBlur: 5
+				            }
+				        },
+				        
+				        axisLabel: {
+				            color: '#fff',
+				            fontSize: 12,
+				            formatter: function(value) {
+				                return echarts.format.formatTime('hh:mm:ss', new Date(value));
+				            }
+				        },
+				        splitLine: {
+				            show: false
+				        },
+				        splitNumber: 3
+				    },
+				    yAxis: [{
+				    	type: 'value',
+				        min: 0,
+				        axisLine: {
+				            lineStyle: {
+				                color: '#4bbbf8',
+				                shadowColor: 'rgba(75, 211, 255, 0.5)',
+				                shadowBlur: 5
+				            }
+				        },
+				        axisLabel: {
+				            color: 'white',
+				            fontSize: 12,
+				            formatter: function (value, index) {
+				            	if (value > 1000 && value <= 1000000) {
+				            		return value/1000 + " K";
+				            	}
+				            	if (value > 10000000 && value <= 1000000000) {
+				            		return value/1000000 + " M";
+				            	}
+				            	if (value > 100000000) {
+				            		return value/1000000000 + " B";
+				            	}
+				            	return value;
+				            }
+				        },
+				        splitLine: {
+				            lineStyle: {
+				                color: 'rgba(75, 211, 255, 0.5)',
+				                type: 'dashed'
+				            }
+				        }
+				    }],
+				    series: [{
+				        name: n1,
+				        type: 'line',
+				        smooth: true,
+				       
+				        label: {
+				            show: true,
+				            position: 'top',
+				            color: '#fff',
+				            fontSize: 14
+				        },
+				        itemStyle: {
+				            color: function(params) {
+				                return params.dataIndex % 2 ? darkBlue : lightBlue;
+				            }
+				        },
+				        showSymbol: false,
+				    	areaStyle: { //区域填充样式
+			                normal: {
+			                 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+			                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								   { offset: 0,  color: 'rgba(61,234,255, 0.9)'}, 
+								   { offset: 0.7,  color: 'rgba(61,234,255, 0)'}
+							   ], false),
+
+			                   shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
+			                   shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+			             	},
+			         	 },
+			             data: d1
+				    },
+				    {
+				        name: n2,
+				        type: 'line',
+				        smooth: true,
+				        showSymbol: false,
+				        label: {
+				            show: true,
+				            position: 'top',
+				            color: '#fff',
+				            fontSize: 14
+				        },
+				        itemStyle: {
+
+				            color: function(params) {
+				                return params.dataIndex % 2 ? darkBlue : lightBlue;
+				            }
+				        },
+				    	areaStyle: { //区域填充样式
+			                normal: {
+			                 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+			                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								   { offset: 0,  color: 'rgba(61,234,255, 0.9)'}, 
+								   { offset: 0.7,  color: 'rgba(61,234,255, 0)'}
+							   ], false),
+
+			                   shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
+			                   shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+			             	},
+			         	 },
+			             data: d2
+				        
+				    }]
+				};
+				return option;
 			}
-			// 时间设置
-			function checkTime(i) {
-			    if (i < 10) {
-			        i = "0" + i;
-			    }
-			    return i;
+			
+			function getBarOption(legData, serData) {
+				var bar_option = {
+				    tooltip: {
+				        trigger: 'axis',
+				        backgroundColor:'rgba(255,255,255,0.8)',
+				        extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
+				        textStyle:{
+				            color:'#6a717b',
+				        },
+				    }, 
+				    grid: {
+				        left: '3%',
+				        right: '15%',
+				        bottom: '3%',
+				        top:'15%',
+				        containLabel: true
+				    },
+				    legend: {
+				    	 show:false,
+				    	 textStyle:{
+					     	color:'#fff',
+					     },
+					     data: ['日志']
+				    },
+				    yAxis: [{
+				        type: 'category',
+				        inverse: true,
+				        axisTick: {
+				            alignWithLabel: true,
+				        },
+				        axisLabel: {
+				            margin: 5,
+				            textStyle: {
+				                fontSize: 12,
+				                color:'#fff'
+				            }
+				        },
+				        axisLine: {
+				            lineStyle: {
+				                color: '#fff'
+				            }
+				        },
+				        data: legData
+				    }],
+				    xAxis: [{
+				         type: 'value',
+				         name: '',
+				         position:'top',
+				         axisLabel: {
+				            textStyle: {
+				                fontSize: 12,
+				                color:'#fff'
+				            }
+				         },
+				         axisLine: {
+				            lineStyle: {
+				                color: '#fff'
+				            }
+				         },
+				         axisLabel: {
+				             formatter: function(value) {
+				            	if (value > 1000 && value <= 1000000) {
+				            		return value/1000 + " K";
+				            	}
+				            	if (value > 10000000 && value <= 1000000000) {
+				            		return value/1000000 + " M";
+				            	}
+				            	if (value > 100000000) {
+				            		return value/1000000000 + " B";
+				            	}
+				            	return value;
+				             },
+				         },
+				         splitNumber: 4,
+				         splitLine: {
+				        	show:false,
+				            lineStyle: {
+				                color: '#fff'
+				            }
+				        }
+				    }],
+				    backgroundColor: 'rgba(255,255,255,0)',
+				    series: [{
+				        name: '日志',
+				        type: 'bar',
+				        barWidth:15,
+ 				        data: serData,
+				        label: {
+				            normal: {
+				                show: false/* ,
+				                position: 'insideRight',
+				                formatter: function(obj) {
+				                	if (obj.value > 1000 && obj.value <= 1000000) {
+					            		return (obj.value/1000).toFixed(2) + " K";
+					            	}
+					            	if (obj.value > 10000000 && obj.value <= 1000000000) {
+					            		return (obj.value/1000000).toFixed(2) + " M";
+					            	}
+					            	if (obj.value > 100000000) {
+					            		return (obj.value/1000000000).toFixed(2) + " B";
+					            	}
+					            	return (obj.value);
+					            },
+				                textStyle: {
+				                    color: 'white' //color of value
+				                } */
+				            }
+				        },
+				        
+				        itemStyle: {
+			                normal: {
+			                    show: true,
+			                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+			                    offset: 0,
+			                    color: '#fac28f' // 0% 处的颜色
+			                }, {
+			                    offset: 1,
+			                    color: '#fc867a' // 100% 处的颜色
+			                }], false),
+			                    //barBorderRadius: [0,10,10,0],
+			                    borderWidth: 10,
+			                },
+			                emphasis: {
+			                    shadowBlur: 15,
+			                    shadowColor: 'rgba(105,123, 214, 0.7)'
+			                }
+			            },
+			            barWidth: '50%',
+			            zlevel: 11
+				    }]
+				};
+				return bar_option;
 			}
-			function timeSet(i) {
-			    var newTime = new Date();
-			    var h = newTime.getHours(); ;
-			    var m = newTime.getMinutes();
-			    var s = newTime.getSeconds();
-			    if(i != -1){
-			    	i = i +1;
-				    s = s - i*5;
-				    if(s<0){
-				    	m = m - 1;
-				    	s = 60 - Math.abs(s);
-				    }
-			    }
-			    h = checkTime(h);
-			    m = checkTime(m);
-			    s = checkTime(s);
-			    return [h, m].join(':')+"'"+s+"''";
+			
+			var data = JSON.parse('${trafficData}');
+			if (data.length > 0) {
+				var name1 = data[0].name;
+				var name2 = data[1].name;
+				var data1 = data[0].data;
+				var data2 = data[1].data;
+				var _data1 = [];
+				var _data2 = [];
+				for (var i = 0; i < 5; i++) {
+				    _data1.push(data1.shift());
+				    _data2.push(data2.shift());
+				}
+				
+				myChart.setOption(getLineOption(name1, name2, _data1, _data2));
+				setInterval(function() {
+					if (data1.length == 0 && data2.length == 0) {
+						$.ajax({
+				    		type:'get',
+				    		dataType: 'json',
+			 				url:"${pageContext.request.contextPath}/nis/dynamicpage/indexTraffic?baseNum=" + top.baseNum,
+			 				success:function(res){//处理返回结果
+			 					if(res) {
+			 						data = res;
+			 						name1 = data[0].name;
+			 						name2 = data[1].name;
+			 						data1 = data[0].data;
+			 						data2 = data[1].data;
+			 						_data1 = [];
+			 						_data2 = [];
+			 						for (var i = 0; i < 5; i++) {
+			 						    _data1.push(data1.shift());
+			 						    _data2.push(data2.shift());
+			 						}
+			 						myChart.setOption(getLineOption(name1, name2, _data1, _data2));
+			 					}
+			 				}
+				    	});
+					} else {
+					    _data1.shift();
+					    _data2.shift();
+					    var data1t = data1.shift();
+					    var data2t = data2.shift();
+					    if (typeof(data1t) != "undefined") {
+					   		_data1.push(data1t);
+					    }
+					    if (typeof(data2t) != "undefined") {
+					   		_data2.push(data2t);
+					    }
+					    myChart.setOption(getLineOption(name1, name2, _data1, _data2));
+					}
+				}, 5000);
 			}
-			var data = [];
-			var timeData = [];
-
-			for (var i = 0; i < 5; i++) {
-			    timeData.unshift(timeSet(i));
-			    data.unshift(randomData());
-			}
-			// 指定图表的配置项和数据
-			var option = {
-				backgroundColor: "rgba(255,255,255,0)",
-			    tooltip: {
-			        show: false
-			    },
-			   grid:{
-			        left: 50,
-			    },
-			    xAxis: {
-			        type: 'category',
-			        boundaryGap: false,
-			        axisLine: {
-			            lineStyle: {
-			                color: '#4bbbf8',
-			                shadowColor: 'rgba(75, 211, 255, 0.5)',
-			                shadowBlur: 5
-			            }
-			        },
-			        
-			        axisLabel: {
-			            color: '#fff',
-			            fontSize: 12
-			        },
-			        splitLine: {
-			            show: false
-			        },
-			        data: timeData,
-
-			    },
-			    yAxis: [{
-			    	
-			        min: 0,
-			        axisLine: {
-			            lineStyle: {
-			                color: '#4bbbf8',
-			                shadowColor: 'rgba(75, 211, 255, 0.5)',
-			                shadowBlur: 5
-			            }
-			        },
-			        axisLabel: {
-			            color: 'white',
-			            fontSize: 12
-			        },
-			        splitLine: {
-			            lineStyle: {
-			                color: 'rgba(75, 211, 255, 0.5)',
-			                type: 'dashed'
-			            }
-			        }
-			    }],
-			    series: [{
-			        name: '数量',
-			        type: 'line',
-			        smooth: true,
-			       
-			        label: {
-			            show: true,
-			            position: 'top',
-			            color: '#fff',
-			            fontSize: 14
-			        },
-			        itemStyle: {
-
-			            color: function(params) {
-			                return params.dataIndex % 2 ? darkBlue : lightBlue;
-			            }
-			        },
-			    	areaStyle: { //区域填充样式
-		                normal: {
-		                 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-		                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-							   { offset: 0,  color: 'rgba(61,234,255, 0.9)'}, 
-							   { offset: 0.7,  color: 'rgba(61,234,255, 0)'}
-						   ], false),
-
-		                 shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
-		                 shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-		             }
-		         },
-			        data: data
-			    }],
-			   
-			};
-
-			myChart.setOption(option);
-			setInterval(function() {
-			    timeData.shift();
-			    timeData.push(timeSet(-1));
-
-			    data.shift();
-			    data.push(randomData());
-
-			    myChart.setOption({
-			    	backgroundColor: "rgba(255,255,255,0)",
-			        xAxis: {
-			            data: timeData
-			        },
-			        series: [{
-			            
-			            data: data
-			        }]
-			    });
-			}, 5000);
-		
-		
 		/* 日志柱状图 */
-		var bar_option = {
-		    //color: ['#3398DB'],
-		    tooltip: {
-		        trigger: 'axis',
-		        backgroundColor:'rgba(255,255,255,0.8)',
-		        extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
-		        textStyle:{
-		            color:'#6a717b',
-		        },
-		    }, 
-		    grid: {
-		        left: '3%',
-		        right: '15%',
-		        bottom: '3%',
-		        top:'15%',
-		        containLabel: true
-		    },
-		     legend: {
-		    	 show:false,
-		    	 textStyle:{
-			            color:'#fff',
-			        },
-		        data: ['日志']
-		    },
-		    yAxis: [{
-		        type: 'category',
-		       
-		        data: ['12时','11时','10时','09时','08时'],
-		        inverse: true,
-		        axisTick: {
-		            alignWithLabel: true,
-		        },
-		         axisLabel: {
-		            margin: 5,
-		            textStyle: {
-		                fontSize: 12,
-		                color:'#fff'
-		                }
-		        },
-		         axisLine: {
-		            lineStyle: {
-		                color: '#fff'
-		            }
-		         },
-		    }],
-		    xAxis: [{
-		        type: 'value',
-		         name: '',
-		         position:'top',
-		         max:8000000,
-		         axisLabel: {
-		           
-		            textStyle: {
-		                fontSize: 12,
-		                color:'#fff'
-		                }
-		        },
-		         axisLine: {
-		            lineStyle: {
-		                color: '#fff'
-		            }
-		         },
-		         axisLabel: {
-		             formatter: (value, index) => {
-		                 return value/10000
-		             },
-		         },
-		         splitLine: {
-		        	 show:false,
-		            lineStyle: {
-		                color: '#fff'
-		            }
-		        }
-		    }],
-		    backgroundColor: 'rgba(255,255,255,0)',
-		    series: [{
-		        name: '日志',
-		        type: 'bar',
-		        barWidth:15,
-		        data: [7827896, 7472072, 7433391, 7137253, 6382192],
-		        label: {
-		            normal: {
-		                show: true,
-		                formatter: (param) => {
-			                 return (param.value/10000).toFixed(2);
-			             },
-		                position: 'insideRight',
-		                textStyle: {
-		                    color: 'white' //color of value
-		                }
-		            }
-		        },
-		        
-		        itemStyle: {
-	                normal: {
-	                    show: true,
-	                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-	                    offset: 0,
-	                    color: '#fac28f' // 0% 处的颜色
-	                }, {
-	                    offset: 1,
-	                    color: '#fc867a' // 100% 处的颜色
-	                }], false),
-	                    //barBorderRadius: [0,10,10,0],
-	                    borderWidth: 10,
-	                },
-	                emphasis: {
-	                    shadowBlur: 15,
-	                    shadowColor: 'rgba(105,123, 214, 0.7)'
-	                }
-	            },
-	            barWidth: '50%',
-	            zlevel: 11
-		    }]
-		};
-		log_bar_Chart.setOption(bar_option);
-		setInterval(function() {
-			log_bar_Chart.clear();
-			log_bar_Chart.setOption(bar_option);
-		}, 5000);
+		var logData = JSON.parse('${logData}');
+		if (logData.length > 0) {
+			var logDataInit = logData.shift();
+			var legInit = [];
+			var serInit = [];
+			for (var i = 0; i < 5; i++) {
+				var _serviceId = logDataInit[i][0];
+				var _sidIndex = top.indexLogServiceIdArr.indexOf(_serviceId);
+				legInit.push(top.indexLogServiceNameArr[_sidIndex]);
+				serInit.push(logDataInit[i][1]);
+			}
+			log_bar_Chart.setOption(getBarOption(legInit, serInit));
+			setInterval(function() {
+				var legData = [];
+				var serData = [];
+				if (logData.length == 0) {
+					$.ajax({
+			    		type:'get',
+			    		dataType: 'json',
+		 				url:'${pageContext.request.contextPath}/nis/dynamicpage/indexLog?sid=' + top.indexLogServiceId + "&baseNum=" + top.baseNum,
+		 				success:function(res){//处理返回结果
+		 					logData = res;
+		 					_logData = logData.shift();
+		 					for (var i = 0; i < 5; i++) {
+		 						var _serviceId = _logData[i][0];
+		 						var _sidIndex = top.indexLogServiceIdArr.indexOf(_serviceId);
+		 						legData.push(top.indexLogServiceNameArr[_sidIndex]);
+		 						serData.push(_logData[i][1]);
+		 					}
+		 					log_bar_Chart.clear();
+		 					log_bar_Chart.setOption(getBarOption(legData, serData));
+		 				}
+					});
+				} else {
+					var _logData = logData.shift();
+					for (var i = 0; i < 5; i++) {
+						var _serviceId = _logData[i][0];
+						var _sidIndex = top.indexLogServiceIdArr.indexOf(_serviceId);
+						legData.push(top.indexLogServiceNameArr[_sidIndex]);
+						serData.push(_logData[i][1]);
+					}
+					log_bar_Chart.clear();
+					log_bar_Chart.setOption(getBarOption(legData, serData));
+				}
+			}, 5000);
+		}
 		
 		/* 数字特效 */
-		function animalNum(){
-			var value = rand(100,999);;
-			
+		function animalNum(dropNum){
+			//var value = rand(100,999);;
 	        $("#dataNums").rollNum({
-	            deVal:value
+	            deVal:dropNum
 	        });
 	    };
 		
-		 function rand(min,max) {
+		function rand(min,max) {
 	        return Math.floor(Math.random()*(max-min))+min;
 	    }
 		
-		animalNum();
-		setInterval('animalNum()',5000);
+		var dropData = JSON.parse('${dropData}');
+		if (dropData.length > 0) {
+			var _dropData = dropData[0].data;
+			animalNum(_dropData.shift());
+			setInterval(function(){
+				if (_dropData.length > 0) {
+					animalNum(_dropData.shift());
+				} else {
+					$.ajax({
+			    		type:'get',
+			    		dataType: 'json',
+		 				url:'${pageContext.request.contextPath}/nis/dynamicpage/indexDrop' + "?baseNum=" + top.baseNum,
+		 				success:function(res){//处理返回结果
+		 					if(res) {
+		 						dropData = res;
+		 						_dropData = dropData[0].data;
+		 						animalNum(_dropData.shift());
+		 					}
+		 				}
+			    	});
+				}
+			}, 5000);
+		}
 		
-		/* 数据流 */
-		var lines = [
-			    {
-			    	coords: [
-					            [46, 600],
-					            [830, 864]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [30, 600],
-					            [830, 864]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [100, 500],
-					            [800, 814]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [100, 500],
-					            [800, 814]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [150, 500],
-					            [830, 864]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#d29781'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [111, 566],
-					            [830, 864]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#d29781'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [247, 193],
-					            [830, 804]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#ebf546'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [10, 300],
-					            [830, 804]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#ebf546'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [10, 400],
-					            [830, 804]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#d29781'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [60, 400],
-					            [830, 804]
-					        ],
-					        effect: {
-					            period: 2,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [160, 200],
-					            [830, 804]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [160, 300],
-					            [830, 804]
-					        ],
-					        effect: {
-					            period: 2,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			   
-			]
-			
-			var line_option = {
-			    backgroundColor: 'rgba(255,255,255,0)',
-			    grid:{
-			        top: 10,
-			        bottom: 10,
-			        left: 10,
-			        right: 10,
-			        width: 682,
-			        height: 595,
-			    },
-			    xAxis: {
-			        show: false,
-			        min: 0,
-			        max: 1000,
-			        position: 'top',
-			        axisPointer: {
-			            show: false
-			        }
-			    },
-			    yAxis: {
-			        show: false,
-			        min: 0,
-			        max: 1000,
-			        axisPointer: {
-			            show: false
-			        }
-			    },
-			    
-			    // 线条动画
-			    series: [
-			        {
-			            type: 'lines',
-			            coordinateSystem: 'cartesian2d',
-			            zlevel: 1,
-			            
-			            // 动画效果
-			            effect: {
-			                show: true,
-			                period: 4, //特效动画的时间，单位为 s
-			                trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
-			                //color: '#d29781',
-			                symbolSize: 6
-			            },
-			            
-			            lineStyle: {
-			                normal: {
-			                    color: '#BF3EFF',
-			                    width: 0,
-			                    curveness: 0
-			                }
-			            },
-			            data: lines
-			        }
-			    ],
-			};
-		lines_Chart.setOption(line_option);
-		/* 数据流出 */
-		var lines_chu = [
-			    
-			    /* 出端 */
-			    {
-			    	coords: [
-					            [1, 801],
-					            [243,968]
-					        ],
-					        effect: {
-					            period: 1,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [23,756],
-					            [215, 878]
-					        ],
-					        effect: {
-					            period: 0.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [0, 764],
-					            [343,968]
-					        ],
-					        effect: {
-					            period: 1,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [2, 701],
-					            [363,968]
-					        ],
-					        effect: {
-					            period: 1,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [24, 653],
-					            [332, 912]
-					        ],
-					        effect: {
-					            period: 1,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [24, 603],
-					            [384, 873]
-					        ],
-					        effect: {
-					            period: 1,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [24, 553],
-					            [368, 781]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [24, 553],
-					            [337, 779]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			    {
-			    	coords: [
-					            [24, 453],
-					            [338, 727]
-					        ],
-					        effect: {
-					            period: 1.5,
-					        },	
-					        lineStyle: {
-	                            normal: {
-	                                color: '#119dd8'
-	                            }
-	                        }
-			    },
-			   
-			]
-			
-			var line_chu_option = {
-			    backgroundColor: 'rgba(255,255,255,0)',
-			    grid:{
-			        top: 10,
-			        bottom: 10,
-			        left: 10,
-			        right: 10,
-			        width: 682,
-			        height: 595,
-			    },
-			    xAxis: {
-			        show: false,
-			        min: 0,
-			        max: 1000,
-			        position: 'top',
-			        axisPointer: {
-			            show: false
-			        }
-			    },
-			    yAxis: {
-			        show: false,
-			        min: 0,
-			        max: 1000,
-			        axisPointer: {
-			            show: false
-			        }
-			    },
-			    
-			    // 线条动画
-			    series: [
-			        {
-			            type: 'lines',
-			            coordinateSystem: 'cartesian2d',
-			            zlevel: 1,
-			            
-			            // 动画效果
-			            effect: {
-			                show: true,
-			                period: 4, //特效动画的时间，单位为 s
-			                trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
-			                //color: '#d29781',
-			                symbolSize: 6
-			            },
-			            lineStyle: {
-			                normal: {
-			                    color: '#BF3EFF',
-			                    width: 0,
-			                    curveness: 0
-			                }
-			            },
-			            data: lines_chu
-			        }
-			    ],
-			};
-		lines_Chart_chu.setOption(line_chu_option);
 		</script>
 </body>
 </html>
\ No newline at end of file
