1

leiSP-admin/src/main/resources/templates/index.html

@@ -180,7 +180,7 @@
                     </a>
                 </div>
                 <ul class="nav navbar-top-links navbar-right welcome-message">
-					<li><a title="可视化" href="/VisualizationController/index" target="_blank"><i class="fa fa-video-camera"></i> 可视化</a></li>
+					<li><a title="可视化" th:href="@{/VisualizationController/index}" target="_blank"><i class="fa fa-video-camera"></i> 可视化</a></li>
                     <li><a title="示例" href="" target="_blank"><i class="fa fa-video-camera"></i> 示例</a></li>
                     <li><a title="文档" href="" target="_blank"><i class="fa fa-question-circle"></i> 文档</a></li>
 	                <li><a title="全屏显示" href="javascript:void(0)" id="fullScreen"><i class="fa fa-arrows-alt"></i> 全屏</a></li>

mybusiness/src/main/resources/static/visualization/allcharts/eventPieTh.js

@@ -0,0 +1,52 @@
+var myChart_eventPie = echarts.init(document.getElementById('jkzb'));
+option_eventPie = {
+	color:['#0ad5c8', '#89ca75'],
+    tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    
+    legend: {
+        orient: 'horizontal',
+        top:'160',
+        left: 'center',
+        data: ['归集接口', '共享接口'],
+        textStyle: {
+      fontSize: 12,
+      color:'#00cdef'
+       },
+    },
+    series: [
+    
+        {
+            name: '接口占比',
+            type: 'pie',
+            center:['50%','40%'],
+            radius: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            label: {
+                show: false,
+                position: 'center'
+            },
+            
+            emphasis: {
+                label: {
+                    show: true,
+                    fontSize: '25',
+                    fontWeight: 'bold'
+                }
+            },
+            labelLine: {
+                show: false
+            },
+            data: [
+                {value: 5, name: '归集接口'},
+                {value: 10, name: '共享接口'},
+              
+            ],
+          
+        }
+    ]
+};
+
+myChart_eventPie.setOption(option_eventPie);

mybusiness/src/main/resources/static/visualization/allcharts/eventPieTh2.js

@@ -0,0 +1,52 @@
+var myChart_eventPie = echarts.init(document.getElementById('jksy'));
+option_eventPie = {
+	color:['#0ad5c8', '#ea8157'],
+    tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    
+    legend: {
+        orient: 'horizontal',
+        top:'160',
+        left: 'center',
+        data: ['已连接', '未连接'],
+        textStyle: {
+      fontSize: 12,
+      color:'#00cdef'
+       },
+    },
+    series: [
+    
+        {
+            name: '接口使用',
+            type: 'pie',
+            center:['50%','40%'],
+            radius: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            label: {
+                show: false,
+                position: 'center'
+            },
+            
+            emphasis: {
+                label: {
+                    show: true,
+                    fontSize: '25',
+                    fontWeight: 'bold'
+                }
+            },
+            labelLine: {
+                show: false
+            },
+            data: [
+                {value: 20, name: '已连接'},
+                {value: 8, name: '未连接'},
+              
+            ],
+          
+        }
+    ]
+};
+
+myChart_eventPie.setOption(option_eventPie);

mybusiness/src/main/resources/static/visualization/allcharts/humanTh.js

@@ -0,0 +1,219 @@
+var myChart_human = echarts.init(document.getElementById('jrbm'));
+
+    option_human = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    
+    grid: {
+	top:'10%',
+        left: '10%',
+        right: '10%',
+        bottom: '10%',
+        containLabel: true
+    },
+    xAxis: {
+        axisLine:{
+        	show:false
+        },
+        axisLabel:{
+        	show:false
+        },
+        splitLine:{
+        	show:false
+        },
+    },
+    yAxis: {
+      
+        type: 'category',
+        data: ['住建局','法院','卫健委','公积金', '民政局','不动产','文旅局'],
+        axisLine:{
+        	lineStyle:{
+        		color:'#00cdef'
+        	}
+        },
+        axisTick:{
+        	show:false
+        },
+   
+    },
+    
+ 
+   
+    series : [
+        {
+            type:'bar',
+            barWidth:10,
+            itemStyle: {        //上方显示数值
+                normal: {
+                    label: {
+                        show: true, //开启显示
+                        position: 'insideLeft', //在上方显示
+                        textStyle: { //数值样式
+                            color: 'white',
+                            fontSize: 11
+                        }
+                    }
+                }
+            },
+          data:[
+              {
+                value:10,
+                
+                itemStyle:{
+                	
+                color:new echarts.graphic.LinearGradient
+                  	(
+                1, 0, 0, 1,
+                [
+                   {offset: 0, color: '#00feff'},
+                    {offset: 0.5, color: '#00feff'},
+                    {offset: 0.8, color: '#0066cc'},
+                    {offset: 1, color: '#0066cc'}
+                ]
+         
+                  	)
+              }
+              }, 
+              {
+                value:20,
+                itemStyle:{color:new echarts.graphic.LinearGradient
+                  	(
+                1, 0, 0, 1,
+                [
+                    {offset: 0, color: '#00ffb9'},
+                    {offset: 0.5, color: '#26ddbe'},
+                    {offset: 0.8, color: '#2ebc95'},
+                    {offset: 1, color: '#2ebc95'}
+                ]
+         
+                  	)
+                  	
+              }
+              },
+              {
+                value:9,
+                itemStyle:{
+                color:new echarts.graphic.LinearGradient
+                  	(
+                1, 0, 0, 1,
+                [
+                    {offset: 0, color: '#fff442'},
+                    {offset: 0.5, color: '#ffc300'},
+                    {offset: 0.8, color: '#e4c52a'},
+                    {offset: 1, color: '#ef8217'}
+                ]
+         
+                  	)
+              }
+              },
+              {
+                value:8,
+                itemStyle:{
+                   color:new echarts.graphic.LinearGradient
+                  	(
+                1, 0, 0, 1,
+                [
+                    {offset: 0, color: '#ff9900'},
+                    {offset: 0.5, color: '#ff9900'},
+                    {offset: 0.8, color: '#cc6600'},
+                    {offset: 1, color: '#cc6600'}
+                ]
+         
+                  	)
+              }
+              },
+                {
+                value:7,
+                itemStyle:{
+                   color:new echarts.graphic.LinearGradient
+                  	(
+                1, 0, 0, 1,
+                [
+                    {offset: 0, color: '#ff0000'},
+                    {offset: 0.5, color: '#ff0000'},
+                    {offset: 0.8, color: '#7f0000'},
+                    {offset: 1, color: '#7f0000'}
+                ]
+         
+                  	)
+              }
+              },
+			  {
+			    value:6,
+			    
+			    itemStyle:{
+			    	
+			    color:new echarts.graphic.LinearGradient
+			      	(
+			    1, 0, 0, 1,
+			    [
+			       {offset: 0, color: '#00feff'},
+			        {offset: 0.5, color: '#00feff'},
+			        {offset: 0.8, color: '#0066cc'},
+			        {offset: 1, color: '#0066cc'}
+			    ]
+			           
+			      	)
+			  }
+			  }, 
+			  {
+			    value:5,
+			    itemStyle:{color:new echarts.graphic.LinearGradient
+			      	(
+			    1, 0, 0, 1,
+			    [
+			        {offset: 0, color: '#00ffb9'},
+			        {offset: 0.5, color: '#26ddbe'},
+			        {offset: 0.8, color: '#2ebc95'},
+			        {offset: 1, color: '#2ebc95'}
+			    ]
+			           
+			      	)
+			      	
+			  }
+			  },
+			  {
+			    value:4,
+			    itemStyle:{
+			    color:new echarts.graphic.LinearGradient
+			      	(
+			    1, 0, 0, 1,
+			    [
+			        {offset: 0, color: '#fff442'},
+			        {offset: 0.5, color: '#ffc300'},
+			        {offset: 0.8, color: '#e4c52a'},
+			        {offset: 1, color: '#ef8217'}
+			    ]
+			           
+			      	)
+			  }
+			  },
+			  {
+			    value:3,
+			    itemStyle:{
+			       color:new echarts.graphic.LinearGradient
+			      	(
+			    1, 0, 0, 1,
+			    [
+			        {offset: 0, color: '#ff9900'},
+			        {offset: 0.5, color: '#ff9900'},
+			        {offset: 0.8, color: '#cc6600'},
+			        {offset: 1, color: '#cc6600'}
+			    ]
+			           
+			      	)
+			  }
+			  },
+			  
+            ]
+        }
+    ]
+    
+};
+
+
+myChart_human.setOption(option_human);

mybusiness/src/main/resources/static/visualization/allcharts/jkTh.js

@@ -0,0 +1,85 @@
+var myChart_jk= echarts.init(document.getElementById('szygj'));
+option_jk = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+        }
+    },
+   grid: {
+       top:'10%',
+       left: '6%',
+       right: '2%',
+       bottom: '10%',	
+       containLabel: true
+   },
+    xAxis: [
+        {
+            type: 'category',
+            data: ['住建局', '法院', '卫健委', '公积金', '民政局', '不动产', '文旅局'],
+            axisTick: {
+                alignWithLabel: true
+            },
+			axisLine:{
+				show:true,
+				lineStyle:{color:'#1089f5'},
+			},
+			axisLabel:{
+				show:true
+			},
+			splitLine:{
+				show:false
+			},
+			
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value',
+			axisLine:{
+				show:false
+			},
+			axisLabel:{
+				show:false
+			},
+			splitLine:{
+				show:false
+			},
+			
+        }
+    ],
+    series: [
+        {
+            name: '归集接口',
+            type: 'bar',
+            barWidth: '50%',
+			itemStyle: {        //上方显示数值
+			    normal: {
+			        label: {
+			            show: true, //开启显示
+			            position: 'top', //在上方显示
+			            textStyle: { //数值样式
+			                color: 'white',
+			                fontSize: 11
+			            }
+			        }
+			    }
+			},
+			color: {
+			    type: 'linear',
+			    x: 0,
+			    y: 0,
+			    x2: 0,
+			    y2: 1,
+			    colorStops: [{
+			        offset: 0, color: '#045ec5' // 0% 处的颜色
+			    }, {
+			        offset: 1, color: '#00ffeb' // 100% 处的颜色
+			    }],
+			    global: false // 缺省为 false
+			},
+            data: [1, 2, 3, 4, 5, 6, 7]
+        }
+    ]
+};
+myChart_jk.setOption(option_jk);

mybusiness/src/main/resources/static/visualization/allcharts/jkTh2.js

@@ -0,0 +1,85 @@
+var myChart_jk= echarts.init(document.getElementById('szygx'));
+option_jk = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+        }
+    },
+   grid: {
+       top:'10%',
+       left: '6%',
+       right: '2%',
+       bottom: '10%',	
+       containLabel: true
+   },
+    xAxis: [
+        {
+            type: 'category',
+            data: ['住建局', '法院', '卫健委', '公积金', '民政局', '不动产', '文旅局'],
+            axisTick: {
+                alignWithLabel: true
+            },
+			axisLine:{
+				show:true,
+				lineStyle:{color:'#1089f5'},
+			},
+			axisLabel:{
+				show:true
+			},
+			splitLine:{
+				show:false
+			},
+			
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value',
+			axisLine:{
+				show:false
+			},
+			axisLabel:{
+				show:false
+			},
+			splitLine:{
+				show:false
+			},
+			
+        }
+    ],
+    series: [
+        {
+            name: '归集接口',
+            type: 'bar',
+            barWidth: '50%',
+			itemStyle: {        //上方显示数值
+			    normal: {
+			        label: {
+			            show: true, //开启显示
+			            position: 'top', //在上方显示
+			            textStyle: { //数值样式
+			                color: 'white',
+			                fontSize: 11
+			            }
+			        }
+			    }
+			},
+			color: {
+			    type: 'linear',
+			    x: 0,
+			    y: 0,
+			    x2: 0,
+			    y2: 1,
+			    colorStops: [{
+			        offset: 0, color: '#045ec5' // 0% 处的颜色
+			    }, {
+			        offset: 1, color: '#00ffeb' // 100% 处的颜色
+			    }],
+			    global: false // 缺省为 false
+			},
+            data: [1, 2, 3, 4, 5, 6, 7]
+        }
+    ]
+};
+myChart_jk.setOption(option_jk);

mybusiness/src/main/resources/static/visualization/allcharts/jkpcTh.js

@@ -0,0 +1,89 @@
+var myChart_jkpc= echarts.init(document.getElementById('jksypc'));
+var base = +new Date(1968, 9, 3);
+var oneDay = 24 * 3600 * 1000;
+var date = [];
+
+var data = [Math.random() * 300];
+
+for (var i = 1; i < 20000; i++) {
+    var now = new Date(base += oneDay);
+    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
+    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+}
+
+option_jkpc = {
+   tooltip: {
+       trigger: 'axis',
+       axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+           type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+       }
+   },
+	grid: {
+	    top:'5%',
+	    left: '6%',
+	    right: '2%',
+	    bottom: '30%',	
+	    containLabel: true
+	},
+   
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: date,
+		axisLine:{
+			show:true,
+			lineStyle:{color:'#1089f5'},
+		},
+    },
+    yAxis: {
+        type: 'value',
+        boundaryGap: [0, '100%'],
+		axisLine:{
+			show:true,
+			lineStyle:{color:'#fff'},
+		},
+    },
+    dataZoom: [{
+        type: 'inside',
+        start: 0,
+        end: 10,
+		
+    }, {
+        start: 0,
+        end: 10,
+        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+        handleSize: '80%',
+		
+        handleStyle: {
+            color: '#fff',
+            shadowBlur: 3,
+            shadowColor: 'rgba(0, 0, 0, 0.6)',
+            shadowOffsetX: 2,
+            shadowOffsetY: 2
+        }
+    }],
+    series: [
+        {
+            name: '接口使用频次',
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            sampling: 'average',
+            itemStyle: {
+                color: 'rgb(255, 70, 131)'
+            },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgb(255, 158, 68)'
+                }, {
+                    offset: 1,
+                    color: 'rgb(255, 70, 131)'
+                }])
+            },
+            data: data
+        }
+    ]
+};
+
+myChart_jkpc.setOption(option_jkpc);

mybusiness/src/main/resources/static/visualization/allcharts/th-echart1.js

@@ -0,0 +1,143 @@
+var phnum=['1','2','3','4','5','6','7','8','9','10'];//排行数
+var getmydmc=['卫健委','中级人民法院','公积金','民政局','不动产','文旅局','住建局','某某某','某某某米','某某某某'];//数据点名称
+var getmyd=[10,3,5,2,5,6,8,6,4,3];//接口数值
+var getmydzd =[];//学生满意度100%
+for (let i = 0; i < getmyd.length; i++) {
+    getmydzd.push(15)
+};
+var myChart_ph = echarts.init(document.getElementById('phb'));
+
+option_ph = {
+    grid: {
+        show:false,
+        width:190,	
+        left: '0',
+        right: '20',
+        bottom: '0',
+        top: '10',
+    },
+
+    tooltip: {
+        trigger: 'axis',
+		align:'left',
+        axisPointer: {
+            type: 'none'
+        },
+        formatter: function(params) {
+            return '接口调用数<br>'+ params[0].name  + ' : ' + params[0].value + '个'
+        }
+    },
+    xAxis: {
+        show: false,
+        type: 'value'
+    },
+    yAxis: [
+		{
+        type: 'category',
+        inverse: true,
+        axisLabel: {
+			interval :false,
+            textStyle: {
+                color: '#fff',
+                fontSize: '16',
+                lineHeight:'40',
+            },
+            // 调整左侧文字的3个属性，缺一不可
+             verticalAlign: 'bottom',
+             align:'left',
+            //调整文字上右下左
+             padding: [0,0,10,55],
+        },
+        splitLine: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        axisLine: {
+            show: false
+        },
+        data:getmydmc
+    },
+	{type: 'category',
+	    inverse: true,
+	    axisLabel: {
+			interval :false,
+	        textStyle: {
+	            color: '#108bf8',
+	            fontSize: '12',
+	            lineHeight:'40',
+	        },
+	        // 调整左侧文字的3个属性，缺一不可
+	         verticalAlign: 'bottom',
+	         align:'left',
+	        //调整文字上右下左
+	         padding: [0,0,10,-185],
+			 formatter: 'TOP{value}'
+	    },
+	    splitLine: {
+	        show: false
+	    },
+	    axisTick: {
+	        show: false
+	    },
+	    axisLine: {
+	        show: false
+	    },
+	    data:phnum
+	}, 
+	
+	{
+        type: 'category',
+        inverse: true,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+            textStyle: {
+                color: '#fff',
+                fontSize: '12'
+            },
+            // 调整右侧数值文字的3个属性，缺一不可
+            padding: [-5, 10, -10, 1],
+			 align:'right',
+			formatter: '{value}个'
+        },
+        data:getmyd
+    }],
+    series: [{
+            name: '值',
+            type: 'bar',
+            zlevel: 1,
+            itemStyle: {
+                normal: {
+                    barBorderRadius: 0,
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                               offset: 0,
+                                               color: '#11469e'
+                                           }, {
+                                               offset: 1,
+                                               color: '#108bf7'
+                                           }]),
+           
+                },
+            },
+            barWidth: 15,
+            data: getmyd
+        },
+        {
+            name: '背景',
+            type: 'bar',
+            barWidth: 15,
+            barGap: '-100%',
+            data: getmydzd,
+            itemStyle: {
+                normal: {
+                    color: 'rgba(103,150,253,0.3)',
+                    barBorderRadius: 0,
+                }
+            },
+        },
+    ]
+};
+myChart_ph.setOption(option_ph);

mybusiness/src/main/resources/static/visualization/css/reset.css

@@ -0,0 +1,394 @@
+html,
+body,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+input,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+textarea,
+article,
+aside,
+audio,
+canvas,
+figure,
+footer,
+header,
+mark,
+menu,
+nav,
+section,
+time,
+video {
+    margin : 0;
+    padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size  : 100%;
+    font-weight: normal
+}
+
+article,
+aside,
+dialog,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+blockquote {
+    display: block;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+img {
+    border        : 0 none;
+    vertical-align: top;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing : 0;
+}
+
+strong,
+em,
+i {
+    font-style : normal;
+    font-weight: normal;
+}
+
+ins {
+    text-decoration: underline;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+mark {
+    background: none;
+}
+
+input::-ms-clear {
+    display: none !important;
+}
+
+body {
+    font      : 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif;
+    background: #fff;
+}
+
+a {
+    text-decoration: none;
+    color          : #333;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+body,
+html,
+.main {
+    width : 100%;
+    height: 100%;
+    font-size: 12px; 
+}
+body{background: #031426;}
+
+.main {
+    position       : relative;
+    background     : url(../images/background.jpg) no-repeat;
+    background-size: cover;
+}
+
+.nav {
+    position       : relative;
+    top            : .5rem;
+    width          : 100%;
+    height         : 5rem;
+    background     : url(../img/top.png) no-repeat;
+    background-size: 100%;
+    text-align     : center;
+    line-height    : 4rem;
+    color          : #0efcff;
+    font-size      : 1.4rem;
+    letter-spacing : .4rem;
+}
+
+.nav_btn {
+    position: absolute;
+    top     : 1.5rem;
+    width   : 100%;
+    height  : 2rem;
+}
+
+.btn_left {
+    float      : left;
+    width      : 25%;
+    margin-left: 5%;
+    height     : 100%;
+}
+
+.btn_right {
+    float       : right;
+    width       : 25%;
+    margin-right: 5%;
+    height      : 100%;
+}
+
+.btn_list {
+    position      : relative;
+    float         : left;
+    width         : 5.5rem;
+    height        : 1.6rem;
+    text-align    : center;
+    line-height   : 1.6rem;
+    font-size     : .9rem;
+    color         : #0efcff;
+    letter-spacing: .1rem;
+    cursor        : pointer;
+}
+
+.btn_left a,
+.btn_right a {
+    display: inline-block;
+}
+
+.btn_left a:nth-child(2) {
+    margin: 0 .6rem;
+}
+
+.btn_left a:nth-child(4) {
+    margin-left: .6rem;
+}
+
+.btn_right a:nth-child(2) {
+    margin: 0 .6rem;
+}
+
+.btn_right a:nth-child(4) {
+    margin-left: .6rem;
+}
+
+.btn_list:before {
+    content  : '';
+    position : absolute;
+    top      : 0;
+    right    : 0;
+    bottom   : 0;
+    left     : 0;
+    border   : 1px solid #6176AF;
+    transform: skewX(-38deg);
+}
+
+.btn_list:hover::before {
+    border-color: #0efcff;
+    box-shadow  : 1px 1px 3px 1px #0efcff inset;
+}
+
+.listActive:before {
+    border-color: #0efcff;
+    box-shadow  : 1px 1px 3px 1px #0efcff inset;
+}
+
+.content {
+    position     : relative;
+    width        : 97%;
+    height       : 87%;
+    margin       : auto;
+    /* background: white; */
+}
+
+.baseBox {
+    position     : relative;
+    float        : left;
+    width        : 48.8%;
+    height       : 32.3%;
+    border       : 1px solid #6176AF;
+    background   : rgba(11, 21, 44, 0.60);
+    border-radius: 5px;
+}
+
+.baseHeightBox {
+    height: 100%;
+}
+
+.baseCenterBox {
+    margin: 1.5% 0;
+}
+
+.leftBox {
+    float        : left;
+    height       : 100%;
+    width        : 34.5%;
+    /* background: yellow; */
+}
+
+.rightBox {
+    float : left;
+    height: 100%;
+    width : 34.5%;
+}
+
+.centerBox {
+    position     : relative;
+    float        : left;
+    width        : 30%;
+    height       : 100%;
+    margin       : 0 .5%;
+    /* background: red; */
+}
+
+.marginLeft {
+    margin-left: 1.5%;
+}
+
+/* 边框描边 */
+.leftTopLine1 {
+    position  : absolute;
+    top       : 0;
+    left      : -1px;
+    height    : 1rem;
+    width     : 2px;
+    background: #0efcff;
+}
+
+.leftTopLine2 {
+    position  : absolute;
+    top       : -1px;
+    left      : 0;
+    height    : 2px;
+    width     : 1rem;
+    background: #0efcff;
+}
+
+.rightTopLine1 {
+    position  : absolute;
+    top       : 0;
+    right     : -1px;
+    height    : 1rem;
+    width     : 2px;
+    background: #0efcff;
+}
+
+.rightTopLine2 {
+    position  : absolute;
+    top       : -1px;
+    right     : 0;
+    height    : 2px;
+    width     : 1rem;
+    background: #0efcff;
+}
+
+.leftBottomLine1 {
+    position  : absolute;
+    bottom    : 0;
+    left      : -1px;
+    height    : 1rem;
+    width     : 2px;
+    background: #0efcff;
+}
+
+.leftBottomLine2 {
+    position  : absolute;
+    bottom    : -1px;
+    left      : 0;
+    height    : 2px;
+    width     : 1rem;
+    background: #0efcff;
+}
+
+.rightBottomLine1 {
+    position  : absolute;
+    bottom    : 0;
+    right     : -1px;
+    height    : 1rem;
+    width     : 2px;
+    background: #0efcff;
+}
+
+.rightBottomLine2 {
+    position  : absolute;
+    bottom    : -1px;
+    right     : 0;
+    height    : 2px;
+    width     : 1rem;
+    background: #0efcff;
+	
+}
+
+.boxTitle {
+    font-size  : 1rem;
+    color      : #0efcff;
+    width      : 80%;
+    margin-left: .8rem;
+    margin-top : .5rem;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    font: right;
+}
+
+/* 视频新加 */
+.video-js .vjs-control {
+    width: 1rem !important;
+}
+.vjs-volume-panel {
+    display: none !important;
+}
+.vjs-live-display {
+    display: none !important;
+}
+.vjs-audio-button{
+    display: none !important;
+}

mybusiness/src/main/resources/static/visualization/js/app.js

@@ -0,0 +1,133 @@
+/* -----------------------------------------------
+/* How to use? : Check the GitHub README
+/* ----------------------------------------------- */
+
+/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
+/*
+particlesJS.load('particles-js', 'particles.json', function() {
+  console.log('particles.js loaded - callback');
+});
+*/
+
+/* Otherwise just put the config content (json): */
+
+particlesJS('particles-js',
+  
+  {
+    "particles": {
+      "number": {
+        "value": 10,
+        "density": {
+          "enable": true,
+          "value_area": 1200
+        }
+      },
+      "color": {
+        "value": "#ffffff"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 2,
+          "color": "#000000"
+        },
+        "polygon": {
+          "nb_sides": 5
+        },
+        "image": {
+          "src": "img/github.svg",
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": .8,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 5,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 40,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#ffffff",
+        "opacity": 0.4,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 6,
+        "direction": "none",
+        "random": false,
+        "straight": false,
+        "out_mode": "out",
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 1200
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+        "onhover": {
+          "enable": true,
+          "mode": "repulse"
+        },
+        "onclick": {
+          "enable": true,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 400,
+          "line_linked": {
+            "opacity": 1
+          }
+        },
+        "bubble": {
+          "distance": 400,
+          "size": 40,
+          "duration": 2,
+          "opacity": 8,
+          "speed": 3
+        },
+        "repulse": {
+          "distance": 200
+        },
+        "push": {
+          "particles_nb": 4
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    },
+    "retina_detect": true,
+    "config_demo": {
+      "hide_card": false,
+      "background_color": "#b61924",
+      "background_image": "",
+      "background_position": "50% 50%",
+      "background_repeat": "no-repeat",
+      "background_size": "cover"
+    }
+  }
+
+);

mybusiness/src/main/resources/static/visualization/js/area_echarts.js

@@ -0,0 +1,515 @@
+
+$(function () {
+    map();
+    function map() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('map_1'));
+var data = [
+     {name: '海门', value: 69},
+     {name: '鄂尔多斯', value: 12},
+     {name: '招远', value: 12},
+     {name: '舟山', value: 12},
+     {name: '齐齐哈尔', value: 14},
+     {name: '盐城', value: 15},
+     {name: '赤峰', value: 16},
+     {name: '青岛', value: 18},
+     {name: '乳山', value: 18},
+     {name: '金昌', value: 19},
+     {name: '泉州', value: 21},
+     {name: '莱西', value: 21},
+     {name: '日照', value: 21},
+     {name: '胶南', value: 22},
+     {name: '南通', value: 23},
+     {name: '拉萨', value: 24},
+     {name: '云浮', value: 24},
+     {name: '梅州', value: 25},
+     {name: '文登', value: 25},
+     {name: '上海', value: 25},
+     {name: '攀枝花', value: 25},
+     {name: '威海', value: 25},
+     {name: '承德', value: 25},
+     {name: '厦门', value: 26},
+     {name: '汕尾', value: 26},
+     {name: '潮州', value: 26},
+     {name: '丹东', value: 27},
+     {name: '太仓', value: 27},
+     {name: '曲靖', value: 27},
+     {name: '烟台', value: 28},
+     {name: '福州', value: 29},
+     {name: '瓦房店', value: 30},
+     {name: '即墨', value: 30},
+     {name: '抚顺', value: 31},
+     {name: '玉溪', value: 31},
+     {name: '张家口', value: 31},
+     {name: '阳泉', value: 31},
+     {name: '莱州', value: 32},
+     {name: '湖州', value: 32},
+     {name: '汕头', value: 32},
+     {name: '昆山', value: 33},
+     {name: '宁波', value: 33},
+     {name: '湛江', value: 33},
+     {name: '揭阳', value: 34},
+     {name: '荣成', value: 34},
+     {name: '连云港', value: 35},
+     {name: '葫芦岛', value: 35},
+     {name: '常熟', value: 36},
+     {name: '东莞', value: 36},
+     {name: '河源', value: 36},
+     {name: '淮安', value: 36},
+     {name: '泰州', value: 36},
+     {name: '南宁', value: 37},
+     {name: '营口', value: 37},
+     {name: '惠州', value: 37},
+     {name: '江阴', value: 37},
+     {name: '蓬莱', value: 37},
+     {name: '韶关', value: 38},
+     {name: '嘉峪关', value: 38},
+     {name: '广州', value: 38},
+     {name: '延安', value: 38},
+     {name: '太原', value: 39},
+     {name: '清远', value: 39},
+     {name: '中山', value: 39},
+     {name: '昆明', value: 39},
+     {name: '寿光', value: 40},
+     {name: '盘锦', value: 40},
+     {name: '长治', value: 41},
+     {name: '深圳', value: 41},
+     {name: '珠海', value: 42},
+     {name: '宿迁', value: 43},
+     {name: '咸阳', value: 43},
+     {name: '铜川', value: 44},
+     {name: '平度', value: 44},
+     {name: '佛山', value: 44},
+     {name: '海口', value: 44},
+     {name: '江门', value: 45},
+     {name: '章丘', value: 45},
+     {name: '肇庆', value: 46},
+     {name: '大连', value: 47},
+     {name: '临汾', value: 47},
+     {name: '吴江', value: 47},
+     {name: '石嘴山', value: 49},
+     {name: '沈阳', value: 50},
+     {name: '苏州', value: 50},
+     {name: '茂名', value: 50},
+     {name: '嘉兴', value: 51},
+     {name: '长春', value: 51},
+     {name: '胶州', value: 52},
+     {name: '银川', value: 52},
+     {name: '张家港', value: 52},
+     {name: '三门峡', value: 53},
+     {name: '锦州', value: 54},
+     {name: '南昌', value: 54},
+     {name: '柳州', value: 54},
+     {name: '三亚', value: 54},
+     {name: '自贡', value: 56},
+     {name: '吉林', value: 56},
+     {name: '阳江', value: 57},
+     {name: '泸州', value: 57},
+     {name: '西宁', value: 57},
+     {name: '宜宾', value: 58},
+     {name: '呼和浩特', value: 58},
+     {name: '成都', value: 58},
+     {name: '大同', value: 58},
+     {name: '镇江', value: 59},
+     {name: '桂林', value: 59},
+     {name: '张家界', value: 59},
+     {name: '宜兴', value: 59},
+     {name: '北海', value: 60},
+     {name: '西安', value: 61},
+     {name: '金坛', value: 62},
+     {name: '东营', value: 62},
+     {name: '牡丹江', value: 63},
+     {name: '遵义', value: 63},
+     {name: '绍兴', value: 63},
+     {name: '扬州', value: 64},
+     {name: '常州', value: 64},
+     {name: '潍坊', value: 65},
+     {name: '重庆', value: 66},
+     {name: '台州', value: 67},
+     {name: '南京', value: 67},
+     {name: '滨州', value: 70},
+     {name: '贵阳', value: 71},
+     {name: '无锡', value: 71},
+     {name: '本溪', value: 71},
+     {name: '克拉玛依', value: 72},
+     {name: '渭南', value: 72},
+     {name: '马鞍山', value: 72},
+     {name: '宝鸡', value: 72},
+     {name: '焦作', value: 75},
+     {name: '句容', value: 75},
+     {name: '北京', value: 79},
+     {name: '徐州', value: 79},
+     {name: '衡水', value: 80},
+     {name: '包头', value: 80},
+     {name: '绵阳', value: 80},
+     {name: '乌鲁木齐', value: 84},
+     {name: '枣庄', value: 84},
+     {name: '杭州', value: 84},
+     {name: '淄博', value: 85},
+     {name: '鞍山', value: 86},
+     {name: '溧阳', value: 86},
+     {name: '库尔勒', value: 86},
+     {name: '安阳', value: 90},
+     {name: '开封', value: 90},
+     {name: '济南', value: 92},
+     {name: '德阳', value: 93},
+     {name: '温州', value: 95},
+     {name: '九江', value: 96},
+     {name: '邯郸', value: 98},
+     {name: '临安', value: 99},
+     {name: '兰州', value: 99},
+     {name: '沧州', value: 100},
+     {name: '临沂', value: 103},
+     {name: '南充', value: 104},
+     {name: '天津', value: 105},
+     {name: '富阳', value: 106},
+     {name: '泰安', value: 112},
+     {name: '诸暨', value: 112},
+     {name: '郑州', value: 313},
+     {name: '哈尔滨', value: 114},
+     {name: '聊城', value: 116},
+     {name: '芜湖', value: 117},
+     {name: '唐山', value: 119},
+     {name: '平顶山', value: 119},
+     {name: '邢台', value: 119},
+     {name: '德州', value: 120},
+     {name: '济宁', value: 120},
+     {name: '荆州', value: 127},
+     {name: '宜昌', value: 130},
+     {name: '义乌', value: 132},
+     {name: '丽水', value: 133},
+     {name: '洛阳', value: 134},
+     {name: '秦皇岛', value: 136},
+     {name: '株洲', value: 143},
+     {name: '石家庄', value: 147},
+     {name: '莱芜', value: 148},
+     {name: '常德', value: 152},
+     {name: '保定', value: 153},
+     {name: '湘潭', value: 154},
+     {name: '金华', value: 157},
+     {name: '岳阳', value: 169},
+     {name: '长沙', value: 175},
+     {name: '衢州', value: 177},
+     {name: '廊坊', value: 193},
+     {name: '菏泽', value: 194},
+     {name: '合肥', value: 229},
+     {name: '武汉', value: 273},
+     {name: '大庆', value: 279}
+];
+var geoCoordMap = {
+    '海门':[121.15,31.89],
+    '鄂尔多斯':[109.781327,39.608266],
+    '招远':[120.38,37.35],
+    '舟山':[122.207216,29.985295],
+    '齐齐哈尔':[123.97,47.33],
+    '盐城':[120.13,33.38],
+    '赤峰':[118.87,42.28],
+    '青岛':[120.33,36.07],
+    '乳山':[121.52,36.89],
+    '金昌':[102.188043,38.520089],
+    '泉州':[118.58,24.93],
+    '莱西':[120.53,36.86],
+    '日照':[119.46,35.42],
+    '胶南':[119.97,35.88],
+    '南通':[121.05,32.08],
+    '拉萨':[91.11,29.97],
+    '云浮':[112.02,22.93],
+    '梅州':[116.1,24.55],
+    '文登':[122.05,37.2],
+    '上海':[121.48,31.22],
+    '攀枝花':[101.718637,26.582347],
+    '威海':[122.1,37.5],
+    '承德':[117.93,40.97],
+    '厦门':[118.1,24.46],
+    '汕尾':[115.375279,22.786211],
+    '潮州':[116.63,23.68],
+    '丹东':[124.37,40.13],
+    '太仓':[121.1,31.45],
+    '曲靖':[103.79,25.51],
+    '烟台':[121.39,37.52],
+    '福州':[119.3,26.08],
+    '瓦房店':[121.979603,39.627114],
+    '即墨':[120.45,36.38],
+    '抚顺':[123.97,41.97],
+    '玉溪':[102.52,24.35],
+    '张家口':[114.87,40.82],
+    '阳泉':[113.57,37.85],
+    '莱州':[119.942327,37.177017],
+    '湖州':[120.1,30.86],
+    '汕头':[116.69,23.39],
+    '昆山':[120.95,31.39],
+    '宁波':[121.56,29.86],
+    '湛江':[110.359377,21.270708],
+    '揭阳':[116.35,23.55],
+    '荣成':[122.41,37.16],
+    '连云港':[119.16,34.59],
+    '葫芦岛':[120.836932,40.711052],
+    '常熟':[120.74,31.64],
+    '东莞':[113.75,23.04],
+    '河源':[114.68,23.73],
+    '淮安':[119.15,33.5],
+    '泰州':[119.9,32.49],
+    '南宁':[108.33,22.84],
+    '营口':[122.18,40.65],
+    '惠州':[114.4,23.09],
+    '江阴':[120.26,31.91],
+    '蓬莱':[120.75,37.8],
+    '韶关':[113.62,24.84],
+    '嘉峪关':[98.289152,39.77313],
+    '广州':[113.23,23.16],
+    '延安':[109.47,36.6],
+    '太原':[112.53,37.87],
+    '清远':[113.01,23.7],
+    '中山':[113.38,22.52],
+    '昆明':[102.73,25.04],
+    '寿光':[118.73,36.86],
+    '盘锦':[122.070714,41.119997],
+    '长治':[113.08,36.18],
+    '深圳':[114.07,22.62],
+    '珠海':[113.52,22.3],
+    '宿迁':[118.3,33.96],
+    '咸阳':[108.72,34.36],
+    '铜川':[109.11,35.09],
+    '平度':[119.97,36.77],
+    '佛山':[113.11,23.05],
+    '海口':[110.35,20.02],
+    '江门':[113.06,22.61],
+    '章丘':[117.53,36.72],
+    '肇庆':[112.44,23.05],
+    '大连':[121.62,38.92],
+    '临汾':[111.5,36.08],
+    '吴江':[120.63,31.16],
+    '石嘴山':[106.39,39.04],
+    '沈阳':[123.38,41.8],
+    '苏州':[120.62,31.32],
+    '茂名':[110.88,21.68],
+    '嘉兴':[120.76,30.77],
+    '长春':[125.35,43.88],
+    '胶州':[120.03336,36.264622],
+    '银川':[106.27,38.47],
+    '张家港':[120.555821,31.875428],
+    '三门峡':[111.19,34.76],
+    '锦州':[121.15,41.13],
+    '南昌':[115.89,28.68],
+    '柳州':[109.4,24.33],
+    '三亚':[109.511909,18.252847],
+    '自贡':[104.778442,29.33903],
+    '吉林':[126.57,43.87],
+    '阳江':[111.95,21.85],
+    '泸州':[105.39,28.91],
+    '西宁':[101.74,36.56],
+    '宜宾':[104.56,29.77],
+    '呼和浩特':[111.65,40.82],
+    '成都':[104.06,30.67],
+    '大同':[113.3,40.12],
+    '镇江':[119.44,32.2],
+    '桂林':[110.28,25.29],
+    '张家界':[110.479191,29.117096],
+    '宜兴':[119.82,31.36],
+    '北海':[109.12,21.49],
+    '西安':[108.95,34.27],
+    '金坛':[119.56,31.74],
+    '东营':[118.49,37.46],
+    '牡丹江':[129.58,44.6],
+    '遵义':[106.9,27.7],
+    '绍兴':[120.58,30.01],
+    '扬州':[119.42,32.39],
+    '常州':[119.95,31.79],
+    '潍坊':[119.1,36.62],
+    '重庆':[106.54,29.59],
+    '台州':[121.420757,28.656386],
+    '南京':[118.78,32.04],
+    '滨州':[118.03,37.36],
+    '贵阳':[106.71,26.57],
+    '无锡':[120.29,31.59],
+    '本溪':[123.73,41.3],
+    '克拉玛依':[84.77,45.59],
+    '渭南':[109.5,34.52],
+    '马鞍山':[118.48,31.56],
+    '宝鸡':[107.15,34.38],
+    '焦作':[113.21,35.24],
+    '句容':[119.16,31.95],
+    '北京':[116.46,39.92],
+    '徐州':[117.2,34.26],
+    '衡水':[115.72,37.72],
+    '包头':[110,40.58],
+    '绵阳':[104.73,31.48],
+    '乌鲁木齐':[87.68,43.77],
+    '枣庄':[117.57,34.86],
+    '杭州':[120.19,30.26],
+    '淄博':[118.05,36.78],
+    '鞍山':[122.85,41.12],
+    '溧阳':[119.48,31.43],
+    '库尔勒':[86.06,41.68],
+    '安阳':[114.35,36.1],
+    '开封':[114.35,34.79],
+    '济南':[117,36.65],
+    '德阳':[104.37,31.13],
+    '温州':[120.65,28.01],
+    '九江':[115.97,29.71],
+    '邯郸':[114.47,36.6],
+    '临安':[119.72,30.23],
+    '兰州':[103.73,36.03],
+    '沧州':[116.83,38.33],
+    '临沂':[118.35,35.05],
+    '南充':[106.110698,30.837793],
+    '天津':[117.2,39.13],
+    '富阳':[119.95,30.07],
+    '泰安':[117.13,36.18],
+    '诸暨':[120.23,29.71],
+    '郑州':[113.65,34.76],
+    '哈尔滨':[126.63,45.75],
+    '聊城':[115.97,36.45],
+    '芜湖':[118.38,31.33],
+    '唐山':[118.02,39.63],
+    '平顶山':[113.29,33.75],
+    '邢台':[114.48,37.05],
+    '德州':[116.29,37.45],
+    '济宁':[116.59,35.38],
+    '荆州':[112.239741,30.335165],
+    '宜昌':[111.3,30.7],
+    '义乌':[120.06,29.32],
+    '丽水':[119.92,28.45],
+    '洛阳':[112.44,34.7],
+    '秦皇岛':[119.57,39.95],
+    '株洲':[113.16,27.83],
+    '石家庄':[114.48,38.03],
+    '莱芜':[117.67,36.19],
+    '常德':[111.69,29.05],
+    '保定':[115.48,38.85],
+    '湘潭':[112.91,27.87],
+    '金华':[119.64,29.12],
+    '岳阳':[113.09,29.37],
+    '长沙':[113,28.21],
+    '衢州':[118.88,28.97],
+    '廊坊':[116.7,39.53],
+    '菏泽':[115.480656,35.23375],
+    '合肥':[117.27,31.86],
+    '武汉':[114.31,30.52],
+    '大庆':[125.03,46.58]
+};
+var convertData = function (data) {
+    var res = [];
+    for (var i = 0; i < data.length; i++) {
+        var geoCoord = geoCoordMap[data[i].name];
+        if (geoCoord) {
+            res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value)
+            });
+        }
+    }
+    return res;
+};
+
+option = {
+   // backgroundColor: '#404a59',
+  /***  title: {
+        text: '实时行驶车辆',
+        subtext: 'data from PM25.in',
+        sublink: 'http://www.pm25.in',
+        left: 'center',
+        textStyle: {
+            color: '#fff'
+        }
+    },**/
+    tooltip : {
+        trigger: 'item',
+		formatter: function (params) {
+              if(typeof(params.value)[2] == "undefined"){
+              	return params.name + ' : ' + params.value;
+              }else{
+              	return params.name + ' : ' + params.value[2];
+              }
+            }
+    },
+  
+    geo: {
+        map: 'china',
+        label: {
+            emphasis: {
+                show: false
+            }
+        },
+        roam: false,//禁止其放大缩小
+        itemStyle: {
+            normal: {
+                areaColor: '#4c60ff',
+                borderColor: '#002097'
+            },
+            emphasis: {
+                areaColor: '#293fff'
+            }
+        }
+    },
+    series : [
+        {
+            name: '消费金额',
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            data: convertData(data),
+            symbolSize: function (val) {
+                return val[2] / 15;
+            },
+            label: {
+                normal: {
+                    formatter: '{b}',
+                    position: 'right',
+                    show: false
+                },
+                emphasis: {
+                    show: true
+                }
+            },
+            itemStyle: {
+                normal: {
+                    color: '#ffeb7b'
+                }
+            }
+        }
+		
+		/**
+		,
+        {
+            name: 'Top 5',
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+            data: convertData(data.sort(function (a, b) {
+                return b.value - a.value;
+            }).slice(0, 6)),
+            symbolSize: function (val) {
+                return val[2] / 20;
+            },
+            showEffectOn: 'render',
+            rippleEffect: {
+                brushType: 'stroke'
+            },
+            hoverAnimation: true,
+            label: {
+                normal: {
+                    formatter: '{b}',
+                    position: 'right',
+                    show: true
+                }
+            },
+            itemStyle: {
+                normal: {
+                    color: '#ffd800',
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0,0,0,.3)'
+                }
+            },
+            zlevel: 1
+        }
+		**/
+    ]
+};
+		
+        myChart.setOption(option);
+        window.addEventListener("resize",function(){
+            myChart.resize();
+        });
+    }
+
+})
+

mybusiness/src/main/resources/static/visualization/js/dataScoll.js

@@ -0,0 +1,43 @@
+ // 数字滚动
+ function numInit() {
+  $('.counter-value').each(function(){
+  $(this).prop('Counter',0).animate({
+      Counter: $(this).text()
+  },{
+      duration: 2500,
+      easing: 'swing',
+      step: function (now){
+      $(this).text(now.toFixed(0));
+      }
+  });
+  });
+}
+function numInit1() {
+  $('.counter-value1').each(function(){
+  $(this).prop('Counter',0).animate({
+      Counter: $(this).text()
+  },{
+      duration: 2500,
+      easing: 'swing',
+      step: function (now){
+      $(this).text(now.toFixed(1));
+      }
+  });
+  });
+}
+function numInit2() {
+  $('.counter-value2').each(function(){
+  $(this).prop('Counter',0).animate({
+      Counter: $(this).text()
+  },{
+      duration: 2500,
+      easing: 'swing',
+      step: function (now){
+      $(this).text(now.toFixed(2));
+      }
+  });
+  });
+}
+numInit();
+numInit1();
+numInit2();

mybusiness/src/main/resources/static/visualization/js/digitalScroll.js

@@ -0,0 +1,10 @@
+(function($){if(!document.defaultView||!document.defaultView.getComputedStyle){var oldCurCSS=jQuery.curCSS;jQuery.curCSS=function(elem,name,force){if(name==='background-position'){name='backgroundPosition';}
+if(name!=='backgroundPosition'||!elem.currentStyle||elem.currentStyle[name]){return oldCurCSS.apply(this,arguments);}
+var style=elem.style;if(!force&&style&&style[name]){return style[name];}
+return oldCurCSS(elem,'backgroundPositionX',force)+' '+oldCurCSS(elem,'backgroundPositionY',force);};}
+var oldAnim=$.fn.animate;$.fn.animate=function(prop){if('background-position'in prop){prop.backgroundPosition=prop['background-position'];delete prop['background-position'];}
+if('backgroundPosition'in prop){prop.backgroundPosition='('+prop.backgroundPosition+')';}
+return oldAnim.apply(this,arguments);};function toArray(strg){strg=strg.replace(/left|top/g,'0px');strg=strg.replace(/right|bottom/g,'100%');strg=strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var res=strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];}
+$.fx.step.backgroundPosition=function(fx){if(!fx.bgPosReady){var start=$.css(fx.elem,'backgroundPosition');if(!start){start='0px 0px';}
+start=toArray(start);fx.start=[start[0],start[2]];var end=toArray(fx.end);fx.end=[end[0],end[2]];fx.unit=[end[1],end[3]];fx.bgPosReady=true;}
+var nowPosX=[];nowPosX[0]=((fx.end[0]-fx.start[0])*fx.pos)+fx.start[0]+fx.unit[0];nowPosX[1]=((fx.end[1]-fx.start[1])*fx.pos)+fx.start[1]+fx.unit[1];fx.elem.style.backgroundPosition=nowPosX[0]+' '+nowPosX[1];};})(jQuery);

mybusiness/src/main/resources/static/visualization/js/index.html

@@ -0,0 +1,356 @@
+
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+        html {
+            height: 100%;
+            background-image: -webkit-radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
+            background-image: radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
+            cursor: move;
+        }
+
+        body {
+            width: 100%;
+            margin: 0;
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <canvas id="canv" width="1920" height="572"></canvas>
+    <script>
+var num = 200;
+var w = window.innerWidth;
+var h = window.innerHeight;
+var max = 100;
+var _x = 0;
+var _y = 0;
+var _z = 150;
+var dtr = function(d) {
+  return d * Math.PI / 180;
+};
+
+var rnd = function() {
+  return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
+};
+var dist = function(p1, p2, p3) {
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
+};
+
+var cam = {
+  obj: {
+    x: _x,
+    y: _y,
+    z: _z
+  },
+  dest: {
+    x: 0,
+    y: 0,
+    z: 1
+  },
+  dist: {
+    x: 0,
+    y: 0,
+    z: 200
+  },
+  ang: {
+    cplane: 0,
+    splane: 0,
+    ctheta: 0,
+    stheta: 0
+  },
+  zoom: 1,
+  disp: {
+    x: w / 2,
+    y: h / 2,
+    z: 0
+  },
+  upd: function() {
+    cam.dist.x = cam.dest.x - cam.obj.x;
+    cam.dist.y = cam.dest.y - cam.obj.y;
+    cam.dist.z = cam.dest.z - cam.obj.z;
+    cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
+    cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
+    cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
+    cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
+  }
+};
+
+var trans = {
+  parts: {
+    sz: function(p, sz) {
+      return {
+        x: p.x * sz.x,
+        y: p.y * sz.y,
+        z: p.z * sz.z
+      };
+    },
+    rot: {
+      x: function(p, rot) {
+        return {
+          x: p.x,
+          y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
+          z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
+        };
+      },
+      y: function(p, rot) {
+        return {
+          x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
+          y: p.y,
+          z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
+        };
+      },
+      z: function(p, rot) {
+        return {
+          x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
+          y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
+          z: p.z
+        };
+      }
+    },
+    pos: function(p, pos) {
+      return {
+        x: p.x + pos.x,
+        y: p.y + pos.y,
+        z: p.z + pos.z
+      };
+    }
+  },
+  pov: {
+    plane: function(p) {
+      return {
+        x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
+        y: p.y,
+        z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
+      };
+    },
+    theta: function(p) {
+      return {
+        x: p.x,
+        y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
+        z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
+      };
+    },
+    set: function(p) {
+      return {
+        x: p.x - cam.obj.x,
+        y: p.y - cam.obj.y,
+        z: p.z - cam.obj.z
+      };
+    }
+  },
+  persp: function(p) {
+    return {
+      x: p.x * cam.dist.z / p.z * cam.zoom,
+      y: p.y * cam.dist.z / p.z * cam.zoom,
+      z: p.z * cam.zoom,
+      p: cam.dist.z / p.z
+    };
+  },
+  disp: function(p, disp) {
+    return {
+      x: p.x + disp.x,
+      y: -p.y + disp.y,
+      z: p.z + disp.z,
+      p: p.p
+    };
+  },
+  steps: function(_obj_, sz, rot, pos, disp) {
+    var _args = trans.parts.sz(_obj_, sz);
+    _args = trans.parts.rot.x(_args, rot);
+    _args = trans.parts.rot.y(_args, rot);
+    _args = trans.parts.rot.z(_args, rot);
+    _args = trans.parts.pos(_args, pos);
+    _args = trans.pov.plane(_args);
+    _args = trans.pov.theta(_args);
+    _args = trans.pov.set(_args);
+    _args = trans.persp(_args);
+    _args = trans.disp(_args, disp);
+    return _args;
+  }
+};
+
+(function() {
+  "use strict";
+  var threeD = function(param) {
+    this.transIn = {};
+    this.transOut = {};
+    this.transIn.vtx = (param.vtx);
+    this.transIn.sz = (param.sz);
+    this.transIn.rot = (param.rot);
+    this.transIn.pos = (param.pos);
+  };
+
+  threeD.prototype.vupd = function() {
+    this.transOut = trans.steps(
+
+      this.transIn.vtx,
+      this.transIn.sz,
+      this.transIn.rot,
+      this.transIn.pos,
+      cam.disp
+    );
+  };
+
+  var Build = function() {
+    this.vel = 0.04;
+    this.lim = 360;
+    this.diff = 200;
+    this.initPos = 100;
+    this.toX = _x;
+    this.toY = _y;
+    this.go();
+  };
+
+  Build.prototype.go = function() {
+    this.canvas = document.getElementById("canv");
+    this.canvas.width = window.innerWidth;
+    this.canvas.height = window.innerHeight;
+    this.$ = canv.getContext("2d");
+    this.$.globalCompositeOperation = 'source-over';
+    this.varr = [];
+    this.dist = [];
+    this.calc = [];
+
+    for (var i = 0, len = num; i < len; i++) {
+      this.add();
+    }
+
+    this.rotObj = {
+      x: 0,
+      y: 0,
+      z: 0
+    };
+    this.objSz = {
+      x: w / 5,
+      y: h / 5,
+      z: w / 5
+    };
+  };
+
+  Build.prototype.add = function() {
+    this.varr.push(new threeD({
+      vtx: {
+        x: rnd(),
+        y: rnd(),
+        z: rnd()
+      },
+      sz: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      rot: {
+        x: 20,
+        y: -20,
+        z: 0
+      },
+      pos: {
+        x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
+        y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
+        z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
+      }
+    }));
+    this.calc.push({
+      x: 360 * Math.random(),
+      y: 360 * Math.random(),
+      z: 360 * Math.random()
+    });
+  };
+
+  Build.prototype.upd = function() {
+    cam.obj.x += (this.toX - cam.obj.x) * 0.05;
+    cam.obj.y += (this.toY - cam.obj.y) * 0.05;
+  };
+
+  Build.prototype.draw = function() {
+    this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    cam.upd();
+    this.rotObj.x += 0.1;
+    this.rotObj.y += 0.1;
+    this.rotObj.z += 0.1;
+
+    for (var i = 0; i < this.varr.length; i++) {
+      for (var val in this.calc[i]) {
+        if (this.calc[i].hasOwnProperty(val)) {
+          this.calc[i][val] += this.vel;
+          if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
+        }
+      }
+
+      this.varr[i].transIn.pos = {
+        x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
+        y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
+        z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
+      };
+      this.varr[i].transIn.rot = this.rotObj;
+      this.varr[i].transIn.sz = this.objSz;
+      this.varr[i].vupd();
+      if (this.varr[i].transOut.p < 0) continue;
+      var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
+      this.$.globalCompositeOperation = 'lighter';
+      g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
+      g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
+      g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
+      this.$.fillStyle = g;
+      this.$.beginPath();
+      this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
+      this.$.fill();
+      this.$.closePath();
+    }
+  };
+  Build.prototype.anim = function() {
+    window.requestAnimationFrame = (function() {
+      return window.requestAnimationFrame ||
+        function(callback, element) {
+          window.setTimeout(callback, 1000 / 60);
+        };
+    })();
+    var anim = function() {
+      this.upd();
+      this.draw();
+      window.requestAnimationFrame(anim);
+
+    }.bind(this);
+    window.requestAnimationFrame(anim);
+  };
+
+  Build.prototype.run = function() {
+    this.anim();
+
+    window.addEventListener('mousemove', function(e) {
+      this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
+      this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
+    }.bind(this));
+    window.addEventListener('touchmove', function(e) {
+      e.preventDefault();
+      this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
+      this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
+    }.bind(this));
+    window.addEventListener('mousedown', function(e) {
+      for (var i = 0; i < 100; i++) {
+        this.add();
+      }
+    }.bind(this));
+    window.addEventListener('touchstart', function(e) {
+      e.preventDefault();
+      for (var i = 0; i < 100; i++) {
+        this.add();
+      }
+    }.bind(this));
+  };
+  var app = new Build();
+  app.run();
+})();
+window.addEventListener('resize', function() {
+  canvas.width = w = window.innerWidth;
+  canvas.height = h = window.innerHeight;
+}, false);
+    </script>
+</body>
+</html>

mybusiness/src/main/resources/static/visualization/js/jcarousellite.js

@@ -0,0 +1,364 @@
+/**
+ * jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget.
+ * @requires jQuery v1.2 or above
+ *
+ * http://gmarwaha.com/jquery/jcarousellite/
+ *
+ * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * Version: 1.0.1
+ * Note: Requires jquery 1.2 or above from version 1.0.1
+ */
+
+/**
+ * Creates a carousel-style navigation widget for images/any-content from a simple HTML markup.
+ *
+ * The HTML markup that is used to build the carousel can be as simple as...
+ *
+ *  <div class="carousel">
+ *      <ul>
+ *          <li><img src="image/1.jpg" alt="1"></li>
+ *          <li><img src="image/2.jpg" alt="2"></li>
+ *          <li><img src="image/3.jpg" alt="3"></li>
+ *      </ul>
+ *  </div>
+ *
+ * As you can see, this snippet is nothing but a simple div containing an unordered list of images.
+ * You don't need any special "class" attribute, or a special "css" file for this plugin.
+ * I am using a class attribute just for the sake of explanation here.
+ *
+ * To navigate the elements of the carousel, you need some kind of navigation buttons.
+ * For example, you will need a "previous" button to go backward, and a "next" button to go forward.
+ * This need not be part of the carousel "div" itself. It can be any element in your page.
+ * Lets assume that the following elements in your document can be used as next, and prev buttons...
+ *
+ * <button class="prev">&lt;&lt;</button>
+ * <button class="next">&gt;&gt;</button>
+ *
+ * Now, all you need to do is call the carousel component on the div element that represents it, and pass in the
+ * navigation buttons as options.
+ *
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev"
+ * });
+ *
+ * That's it, you would have now converted your raw div, into a magnificient carousel.
+ *
+ * There are quite a few other options that you can use to customize it though.
+ * Each will be explained with an example below.
+ *
+ * @param an options object - You can specify all the options shown below as an options object param.
+ *
+ * @option btnPrev, btnNext : string - no defaults
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev"
+ * });
+ * @desc Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward.
+ *
+ * @option btnGo - array - no defaults
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      btnGo: [".0", ".1", ".2"]
+ * });
+ * @desc If you don't want next and previous buttons for navigation, instead you prefer custom navigation based on
+ * the item number within the carousel, you can use this option. Just supply an array of selectors for each element
+ * in the carousel. The index of the array represents the index of the element. What i mean is, if the
+ * first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel
+ * will slide to the first element and so on and so forth. This feature is very powerful. For example, i made a tabbed
+ * interface out of it by making my navigation elements styled like tabs in css. As the carousel is capable of holding
+ * any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin.
+ * The best part is that, the tab will "slide" based on the provided effect. :-)
+ *
+ * @option mouseWheel : boolean - default is false
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      mouseWheel: true
+ * });
+ * @desc The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of using buttons.
+ * To get this feature working, you have to do 2 things. First, you have to include the mouse-wheel plugin from brandon.
+ * Second, you will have to set the option "mouseWheel" to true. That's it, now you will be able to navigate your carousel
+ * using the mouse wheel. Using buttons and mouseWheel or not mutually exclusive. You can still have buttons for navigation
+ * as well. They complement each other. To use both together, just supply the options required for both as shown below.
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      mouseWheel: true
+ * });
+ *
+ * @option auto : number - default is null, meaning autoscroll is disabled by default
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      auto: 800,
+ *      speed: 500
+ * });
+ * @desc You can make your carousel auto-navigate itself by specfying a millisecond value in this option.
+ * The value you specify is the amount of time between 2 slides. The default is null, and that disables auto scrolling.
+ * Specify this value and magically your carousel will start auto scrolling.
+ *
+ * @option speed : number - 200 is default
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      speed: 800
+ * });
+ * @desc Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with
+ * different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect.
+ *
+ * @option easing : string - no easing effects by default.
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      easing: "bounceout"
+ * });
+ * @desc You can specify any easing effect. Note: You need easing plugin for that. Once specified,
+ * the carousel will slide based on the provided easing effect.
+ *
+ * @option vertical : boolean - default is false
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      vertical: true
+ * });
+ * @desc Determines the direction of the carousel. true, means the carousel will display vertically. The next and
+ * prev buttons will slide the items vertically as well. The default is false, which means that the carousel will
+ * display horizontally. The next and prev items will slide the items from left-right in this case.
+ *
+ * @option circular : boolean - default is true
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      circular: false
+ * });
+ * @desc Setting it to true enables circular navigation. This means, if you click "next" after you reach the last
+ * element, you will automatically slide to the first element and vice versa. If you set circular to false, then
+ * if you click on the "next" button after you reach the last element, you will stay in the last element itself
+ * and similarly for "previous" button and first element.
+ *
+ * @option visible : number - default is 3
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      visible: 4
+ * });
+ * @desc This specifies the number of items visible at all times within the carousel. The default is 3.
+ * You are even free to experiment with real numbers. Eg: "3.5" will have 3 items fully visible and the
+ * last item half visible. This gives you the effect of showing the user that there are more images to the right.
+ *
+ * @option start : number - default is 0
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      start: 2
+ * });
+ * @desc You can specify from which item the carousel should start. Remember, the first item in the carousel
+ * has a start of 0, and so on.
+ *
+ * @option scrool : number - default is 1
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      scroll: 2
+ * });
+ * @desc The number of items that should scroll/slide when you click the next/prev navigation buttons. By
+ * default, only one item is scrolled, but you may set it to any number. Eg: setting it to "2" will scroll
+ * 2 items when you click the next or previous buttons.
+ *
+ * @option beforeStart, afterEnd : function - callbacks
+ * @example
+ * $(".carousel").jCarouselLite({
+ *      btnNext: ".next",
+ *      btnPrev: ".prev",
+ *      beforeStart: function(a) {
+ *          alert("Before animation starts:" + a);
+ *      },
+ *      afterEnd: function(a) {
+ *          alert("After animation ends:" + a);
+ *      }
+ * });
+ * @desc If you wanted to do some logic in your page before the slide starts and after the slide ends, you can
+ * register these 2 callbacks. The functions will be passed an argument that represents an array of elements that
+ * are visible at the time of callback.
+ *
+ *
+ * @cat Plugins/Image Gallery
+ * @author Ganeshji Marwaha/ganeshread@gmail.com
+ */
+
+(function($) {                                          // Compliant with jquery.noConflict()
+$.fn.jCarouselLite = function(o) {
+    o = $.extend({
+        btnPrev: null,
+        btnNext: null,
+        btnGo: null,
+        mouseWheel: false,
+        auto: null,
+        hoverPause: false,
+
+        speed: 200,
+        easing: null,
+
+        vertical: false,
+        circular: true,
+        visible: 4,
+        start: 0,
+        scroll: 1,
+
+        beforeStart: null,
+        afterEnd: null
+    }, o || {});
+
+    return this.each(function() {                           // Returns the element collection. Chainable.
+
+        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
+        var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;
+
+        if(o.circular) {
+            ul.prepend(tLi.slice(tl-v+2).clone())
+              .append(tLi.slice(0,o.scroll).clone());
+            o.start += v-1;
+        }
+
+        var li = $("li", ul), itemLength = li.size(), curr = o.start;
+        div.css("visibility", "visible");
+
+        li.css({overflow: "hidden", float: o.vertical ? "none" : "left", height:"2.4rem"});
+        ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
+        div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});
+
+        var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
+        var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
+        var divSize = liSize * v;                           // size of entire div(total length for just the visible items)
+
+        li.css({width: li.width(), height: li.height()});
+        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
+
+        div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images
+
+        if(o.btnPrev) {
+            $(o.btnPrev).click(function() {
+                return go(curr-o.scroll);
+            });
+            if(o.hoverPause) {
+                $(o.btnPrev).hover(function(){stopAuto();}, function(){startAuto();});
+            }
+        }
+
+
+        if(o.btnNext) {
+            $(o.btnNext).click(function() {
+                return go(curr+o.scroll);
+            });
+            if(o.hoverPause) {
+                $(o.btnNext).hover(function(){stopAuto();}, function(){startAuto();});
+            }
+        }
+
+        if(o.btnGo)
+            $.each(o.btnGo, function(i, val) {
+                $(val).click(function() {
+                    return go(o.circular ? o.visible+i : i);
+                });
+            });
+
+        if(o.mouseWheel && div.mousewheel)
+            div.mousewheel(function(e, d) {
+                return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
+            });
+
+        var autoInterval;
+
+        function startAuto() {
+          stopAuto();
+          autoInterval = setInterval(function() {
+                  go(curr+o.scroll);
+              }, o.auto+o.speed);
+        };
+
+        function stopAuto() {
+            clearInterval(autoInterval);
+        };
+
+        if(o.auto) {
+            if(o.hoverPause) {
+                div.hover(function(){stopAuto();}, function(){startAuto();});
+            }
+            startAuto();
+        };
+
+        function vis() {
+            return li.slice(curr).slice(0,v);
+        };
+
+        function go(to) {
+            if(!running) {
+
+                if(o.beforeStart)
+                    o.beforeStart.call(this, vis());
+
+                if(o.circular) {            // If circular we are in first or last, then goto the other end
+                    if(to<0) {           // If before range, then go around
+                        ul.css(animCss, -( (curr + tl) * liSize)+"px");
+                        curr = to + tl;
+                    } else if(to>itemLength-v) { // If beyond range, then come around
+                        ul.css(animCss, -( (curr - tl) * liSize ) + "px" );
+                        curr = to - tl;
+                    } else curr = to;
+                } else {                    // If non-circular and to points to first or last, we just return.
+                    if(to<0 || to>itemLength-v) return;
+                    else curr = to;
+                }                           // If neither overrides it, the curr will still be "to" and we can proceed.
+
+                running = true;
+
+                ul.animate(
+                    animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
+                    function() {
+                        if(o.afterEnd)
+                            o.afterEnd.call(this, vis());
+                        running = false;
+                    }
+                );
+                // Disable buttons when the carousel reaches the last/first, and enable when not
+                if(!o.circular) {
+                    $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
+                    $( (curr-o.scroll<0 && o.btnPrev)
+                        ||
+                       (curr+o.scroll > itemLength-v && o.btnNext)
+                        ||
+                       []
+                     ).addClass("disabled");
+                }
+
+            }
+            return false;
+        };
+    });
+};
+
+function css(el, prop) {
+    return parseInt($.css(el[0], prop)) || 0;
+};
+function width(el) {
+    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
+};
+function height(el) {
+    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
+};
+
+})(jQuery);

mybusiness/src/main/resources/static/visualization/js/js.js

@@ -0,0 +1,798 @@
+
+$(function () {
+echarts_1();
+echarts_2();
+echarts_4();
+echarts_31();
+echarts_32();
+echarts_33();
+echarts_5();
+echarts_6();
+function echarts_1() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('echart1'));
+
+       option = {
+  //  backgroundColor: '#00265f',
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '0%',
+		top:'10px',
+        right: '0%',
+        bottom: '4%',
+       containLabel: true
+    },
+    xAxis: [{
+        type: 'category',
+      		data: ['商超门店', '教育培训', '房地产', '生活服务', '汽车销售', '旅游酒店', '五金建材'],
+        axisLine: {
+            show: true,
+         lineStyle: {
+                color: "rgba(255,255,255,.1)",
+                width: 1,
+                type: "solid"
+            },
+        },
+		
+        axisTick: {
+            show: false,
+        },
+		axisLabel:  {
+                interval: 0,
+               // rotate:50,
+                show: true,
+                splitNumber: 15,
+                textStyle: {
+ 					color: "rgba(255,255,255,.6)",
+                    fontSize: '12',
+                },
+            },
+    }],
+    yAxis: [{
+        type: 'value',
+        axisLabel: {
+           //formatter: '{value} %'
+			show:true,
+			 textStyle: {
+ 					color: "rgba(255,255,255,.6)",
+                    fontSize: '12',
+                },
+        },
+        axisTick: {
+            show: false,
+        },
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: "rgba(255,255,255,.1	)",
+                width: 1,
+                type: "solid"
+            },
+        },
+        splitLine: {
+            lineStyle: {
+               color: "rgba(255,255,255,.1)",
+            }
+        }
+    }],
+    series: [
+		{
+        type: 'bar',
+        data: [200, 300, 300, 900, 1500, 1200, 600],
+        barWidth:'35%', //柱子宽度
+       // barGap: 1, //柱子之间间距
+        itemStyle: {
+            normal: {
+                color:'#2f89cf',
+                opacity: 1,
+				barBorderRadius: 5,
+            }
+        }
+    }
+		
+	]
+};
+      
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize",function(){
+            myChart.resize();
+        });
+    }
+function echarts_2() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('echart2'));
+
+       option = {
+  //  backgroundColor: '#00265f',
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow'}
+    },
+    grid: {
+        left: '0%',
+		top:'10px',
+        right: '0%',
+        bottom: '4%',
+       containLabel: true
+    },
+    xAxis: [{
+        type: 'category',
+      		data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
+        axisLine: {
+            show: true,
+         lineStyle: {
+                color: "rgba(255,255,255,.1)",
+                width: 1,
+                type: "solid"
+            },
+        },
+		
+        axisTick: {
+            show: false,
+        },
+		axisLabel:  {
+                interval: 0,
+               // rotate:50,
+                show: true,
+                splitNumber: 15,
+                textStyle: {
+ 					color: "rgba(255,255,255,.6)",
+                    fontSize: '12',
+                },
+            },
+    }],
+    yAxis: [{
+        type: 'value',
+        axisLabel: {
+           //formatter: '{value} %'
+			show:true,
+			 textStyle: {
+ 					color: "rgba(255,255,255,.6)",
+                    fontSize: '12',
+                },
+        },
+        axisTick: {
+            show: false,
+        },
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: "rgba(255,255,255,.1	)",
+                width: 1,
+                type: "solid"
+            },
+        },
+        splitLine: {
+            lineStyle: {
+               color: "rgba(255,255,255,.1)",
+            }
+        }
+    }],
+    series: [
+		{
+       
+        type: 'bar',
+        data: [1500, 1200, 600, 200, 300, 300, 900],
+        barWidth:'35%', //柱子宽度
+       // barGap: 1, //柱子之间间距
+        itemStyle: {
+            normal: {
+                color:'#27d08a',
+                opacity: 1,
+				barBorderRadius: 5,
+            }
+        }
+    }
+		
+	]
+};
+      
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize",function(){
+            myChart.resize();
+        });
+    }
+function echarts_5() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('echart5'));
+
+       option = {
+  //  backgroundColor: '#00265f',
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    
+    grid: {
+        left: '0%',
+		top:'10px',
+        right: '0%',
+        bottom: '2%',
+       containLabel: true
+    },
+    xAxis: [{
+        type: 'category',
+      		data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽', '四川'],
+        axisLine: {
+            show: true,
+         lineStyle: {
+                color: "rgba(255,255,255,.1)",
+                width: 1,
+                type: "solid"
+            },
+        },
+		
+        axisTick: {
+            show: false,
+        },
+		axisLabel:  {
+                interval: 0,
+               // rotate:50,
+                show: true,
+                splitNumber: 15,
+                textStyle: {
+ 					color: "rgba(255,255,255,.6)",
+                    fontSize: '12',
+                },
+            },
+    }],
+    yAxis: [{
+        type: 'value',
+        axisLabel: {
+           //formatter: '{value} %'
+			show:true,
+			 textStyle: {
+ 					color: "rgba(255,255,255,.6)",
+                    fontSize: '12',
+                },
+        },
+        axisTick: {
+            show: false,
+        },
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: "rgba(255,255,255,.1	)",
+                width: 1,
+                type: "solid"
+            },
+        },
+        splitLine: {
+            lineStyle: {
+               color: "rgba(255,255,255,.1)",
+            }
+        }
+    }],
+    series: [{
+        type: 'bar',
+        data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
+        barWidth:'35%', //柱子宽度
+       // barGap: 1, //柱子之间间距
+        itemStyle: {
+            normal: {
+                color:'#2f89cf',
+                opacity: 1,
+				barBorderRadius: 5,
+            }
+        }
+    }
+	]
+};
+      
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize",function(){
+            myChart.resize();
+        });
+    }
+	
+function echarts_4() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('echart4'));
+
+    option = {
+	    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            lineStyle: {
+                color: '#dddc6b'
+            }
+        }
+    },
+		    legend: {
+    top:'0%',
+        data:['安卓','IOS'],
+                textStyle: {
+           color: 'rgba(255,255,255,.5)',
+			fontSize:'12',
+        }
+    },
+    grid: {
+        left: '10',
+		top: '30',
+        right: '10',
+        bottom: '10',
+        containLabel: true
+    },
+
+    xAxis: [{
+        type: 'category',
+        boundaryGap: false,
+axisLabel:  {
+                textStyle: {
+ 					color: "rgba(255,255,255,.6)",
+					fontSize:12,
+                },
+            },
+        axisLine: {
+			lineStyle: { 
+				color: 'rgba(255,255,255,.2)'
+			}
+
+        },
+
+   data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
+
+    }, {
+
+        axisPointer: {show: false},
+        axisLine: {  show: false},
+        position: 'bottom',
+        offset: 20,
+
+       
+
+    }],
+
+    yAxis: [{
+        type: 'value',
+        axisTick: {show: false},
+        axisLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,.1)'
+            }
+        },
+       axisLabel:  {
+                textStyle: {
+ 					color: "rgba(255,255,255,.6)",
+					fontSize:12,
+                },
+            },
+
+        splitLine: {
+            lineStyle: {
+                 color: 'rgba(255,255,255,.1)'
+            }
+        }
+    }],
+    series: [
+		{
+        name: '安卓',
+        type: 'line',
+         smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+			
+            normal: {
+				color: '#0184d5',
+                width: 2
+            }
+        },
+        areaStyle: {
+            normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(1, 132, 213, 0.4)'
+                }, {
+                    offset: 0.8,
+                    color: 'rgba(1, 132, 213, 0.1)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+            }
+        },
+			itemStyle: {
+			normal: {
+				color: '#0184d5',
+				borderColor: 'rgba(221, 220, 107, .1)',
+				borderWidth: 12
+			}
+		},
+        data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4,3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
+
+    }, 
+{
+        name: 'IOS',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+			
+            normal: {
+				color: '#00d887',
+                width: 2
+            }
+        },
+        areaStyle: {
+            normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(0, 216, 135, 0.4)'
+                }, {
+                    offset: 0.8,
+                    color: 'rgba(0, 216, 135, 0.1)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+            }
+        },
+			itemStyle: {
+			normal: {
+				color: '#00d887',
+				borderColor: 'rgba(221, 220, 107, .1)',
+				borderWidth: 12
+			}
+		},
+        data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]
+
+    }, 
+	
+		 ]
+
+};
+      
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize",function(){
+            myChart.resize();
+        });
+    }
+function echarts_6() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('echart6'));
+
+        var dataStyle = {
+	normal: {
+		label: {
+			show: false
+		},
+		labelLine: {
+			show: false
+		},
+		//shadowBlur: 40,
+		//shadowColor: 'rgba(40, 40, 40, 1)',
+	}
+};
+var placeHolderStyle = {
+	normal: {
+		color: 'rgba(255,255,255,.05)',
+		label: {show: false,},
+		labelLine: {show: false}
+	},
+	emphasis: {
+		color: 'rgba(0,0,0,0)'
+	}
+};
+option = {
+	color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
+	tooltip: {
+		show: true,
+		formatter: "{a} : {c} "
+	},
+	legend: {
+		itemWidth: 10,
+        itemHeight: 10,
+		itemGap: 12,
+		bottom: '3%',
+		
+		data: ['浙江', '上海', '广东', '北京', '深圳'],
+		textStyle: {
+                    color: 'rgba(255,255,255,.6)',
+                }
+	},
+	
+	series: [
+		{
+		name: '浙江',
+		type: 'pie',
+		clockWise: false,
+		center: ['50%', '42%'],
+		radius: ['59%', '70%'],
+		itemStyle: dataStyle,
+		hoverAnimation: false,
+		data: [{
+			value: 80,
+			name: '01'
+		}, {
+			value: 20,
+			name: 'invisible',
+			tooltip: {show: false},
+			itemStyle: placeHolderStyle
+		}]
+	},
+		{
+		name: '上海',
+		type: 'pie',
+		clockWise: false,
+		center: ['50%', '42%'],
+		radius: ['49%', '60%'],
+		itemStyle: dataStyle,
+		hoverAnimation: false,
+		data: [{
+			value: 70,
+			name: '02'
+		}, {
+			value: 30,
+			name: 'invisible',
+			tooltip: {show: false},
+			itemStyle: placeHolderStyle
+		}]
+	}, 
+		{
+		name: '广东',
+		type: 'pie',
+		clockWise: false,
+		hoverAnimation: false,
+		center: ['50%', '42%'],
+		radius: ['39%', '50%'],
+		itemStyle: dataStyle,
+		data: [{
+			value: 65,
+			name: '03'
+		}, {
+			value: 35,
+			name: 'invisible',
+			tooltip: {show: false},
+			itemStyle: placeHolderStyle
+		}]
+	},
+		{
+		name: '北京',
+		type: 'pie',
+		clockWise: false,
+		hoverAnimation: false,
+		center: ['50%', '42%'],
+		radius: ['29%', '40%'],
+		itemStyle: dataStyle,
+		data: [{
+			value: 60,
+			name: '04'
+		}, {
+			value: 40,
+			name: 'invisible',
+			tooltip: {show: false},
+			itemStyle: placeHolderStyle
+		}]
+	}, 
+		{
+		name: '深圳',
+		type: 'pie',
+		clockWise: false,
+		hoverAnimation: false,
+		center: ['50%', '42%'],
+		radius: ['20%', '30%'],
+		itemStyle: dataStyle,
+		data: [{
+			value: 50,
+			name: '05'
+		}, {
+			value: 50,
+			name: 'invisible',
+			tooltip: {show: false},
+			itemStyle: placeHolderStyle
+		}]
+	}, ]
+};
+      
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize",function(){
+            myChart.resize();
+        });
+    }
+function echarts_31() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('fb1')); 
+option = {
+   
+	    title: [{
+        text: '年龄分布',
+        left: 'center',
+        textStyle: {
+            color: '#fff',
+			fontSize:'16'
+        }
+
+    }],
+    tooltip: {
+        trigger: 'item',
+        formatter: "{a} <br/>{b}: {c} ({d}%)",
+position:function(p){   //其中p为当前鼠标的位置
+            return [p[0] + 10, p[1] - 10];
+        }
+    },
+    legend: {
+        
+top:'70%',
+       itemWidth: 10,
+        itemHeight: 10,
+        data:['0岁以下','20-29岁','30-39岁','40-49岁','50岁以上'],
+                textStyle: {
+            color: 'rgba(255,255,255,.5)',
+			fontSize:'12',
+        }
+    },
+    series: [
+        {
+        	name:'年龄分布',
+            type:'pie',
+			center: ['50%', '42%'],
+            radius: ['40%', '60%'],
+                  color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],	
+            label: {show:false},
+			labelLine: {show:false},
+            data:[
+                {value:1, name:'0岁以下'},
+                {value:4, name:'20-29岁'},
+                {value:2, name:'30-39岁'},
+                {value:2, name:'40-49岁'},
+                {value:1, name:'50岁以上'},
+            ]
+        }
+    ]
+};
+      
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize",function(){
+            myChart.resize();
+        });
+    }
+function echarts_32() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('fb2'));
+option = {
+   
+	    title: [{
+        text: '职业分布',
+        left: 'center',
+        textStyle: {
+            color: '#fff',
+			fontSize:'16'
+        }
+
+    }],
+    tooltip: {
+        trigger: 'item',
+        formatter: "{a} <br/>{b}: {c} ({d}%)",
+position:function(p){   //其中p为当前鼠标的位置
+            return [p[0] + 10, p[1] - 10];
+        }
+    },
+    legend: {
+        
+    top:'70%',
+       itemWidth: 10,
+        itemHeight: 10,
+        data:['电子商务','教育','IT/互联网','金融','学生','其他'],
+                textStyle: {
+           color: 'rgba(255,255,255,.5)',
+			fontSize:'12',
+        }
+    },
+    series: [
+        {
+        	name:'年龄分布',
+            type:'pie',
+			center: ['50%', '42%'],
+            radius: ['40%', '60%'],
+            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],	
+            label: {show:false},
+			labelLine: {show:false},
+            data:[
+                {value:5, name:'电子商务'},
+                {value:1, name:'教育'},
+                {value:6, name:'IT/互联网'},
+                {value:2, name:'金融'},
+                {value:1, name:'学生'},
+                {value:1, name:'其他'},
+            ]
+        }
+    ]
+};
+      
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize",function(){
+            myChart.resize();
+        });
+    }
+function echarts_33() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('fb3'));
+option = {
+	    title: [{
+        text: '兴趣分布',
+        left: 'center',
+        textStyle: {
+            color: '#fff',
+			fontSize:'16'
+        }
+
+    }],
+    tooltip: {
+        trigger: 'item',
+        formatter: "{a} <br/>{b}: {c} ({d}%)",
+position:function(p){   //其中p为当前鼠标的位置
+            return [p[0] + 10, p[1] - 10];
+        }
+    },
+    legend: {
+    top:'70%',
+       itemWidth: 10,
+        itemHeight: 10,
+        data:['汽车','旅游','财经','教育','软件','其他'],
+                textStyle: {
+            color: 'rgba(255,255,255,.5)',
+			fontSize:'12',
+        }
+    },
+    series: [
+        {
+        	name:'兴趣分布',
+            type:'pie',
+			center: ['50%', '42%'],
+            radius: ['40%', '60%'],
+                   color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],	
+            label: {show:false},
+			labelLine: {show:false},
+            data:[
+                {value:2, name:'汽车'},
+                {value:3, name:'旅游'},
+                {value:1, name:'财经'},
+                {value:4, name:'教育'},
+                {value:8, name:'软件'},
+                {value:1, name:'其他'},
+            ]
+        }
+    ]
+};
+      
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize",function(){
+            myChart.resize();
+        });
+    }
+				
+	
+})
+
+
+
+		
+		
+		
+
+
+		
+
+
+
+
+
+
+
+
+

mybusiness/src/main/resources/static/visualization/js/particles.js

@@ -0,0 +1,544 @@
+/* -----------------------------------------------
+/* Author : Vincent Garreau  - vincentgarreau.com
+/* MIT license: http://opensource.org/licenses/MIT
+/* GitHub : https://github.com/VincentGarreau/particles.js
+/* How to use? : Check the GitHub README
+/* v1.0.3
+/* ----------------------------------------------- */
+
+function launchParticlesJS(tag_id, params){
+
+  var canvas_el = document.querySelector('#'+tag_id+' > canvas');
+
+  /* particles.js variables with default values */
+  pJS = {
+    canvas: {
+      el: canvas_el,
+      w: canvas_el.offsetWidth,
+      h: canvas_el.offsetHeight
+    },
+    particles: {
+      color: '#fff',
+      shape: 'circle',
+      opacity: 1,
+      size: 2.5,
+      size_random: true,
+      nb: 200,
+      line_linked: {
+        enable_auto: true,
+        distance: 100,
+        color: '#fff',
+        opacity: 1,
+        width: 1,
+        condensed_mode: {
+          enable: true,
+          rotateX: 65000,
+          rotateY: 65000
+        }
+      },
+      anim: {
+        enable: true,
+          speed: 1
+      },
+      array: []
+    },
+    interactivity: {
+      enable: true,
+      mouse: {
+        distance: 100
+      },
+      detect_on: 'canvas',
+      mode: 'grab',
+      line_linked: {
+        opacity: 1
+      },
+      events: {
+        onclick: {
+          enable: true,
+          mode: 'push',
+          nb: 4
+        }
+      }
+    },
+    retina_detect: false,
+    fn: {
+      vendors:{
+        interactivity: {}
+      }
+    }
+  };
+
+  /* params settings */
+  if(params){
+    if(params.particles){
+      var paramsForParticles = params.particles;
+      if(paramsForParticles.color) pJS.particles.color = paramsForParticles.color;
+      if(paramsForParticles.shape) pJS.particles.shape = paramsForParticles.shape;
+      if(paramsForParticles.opacity) pJS.particles.opacity = paramsForParticles.opacity;
+      if(paramsForParticles.size) pJS.particles.size = paramsForParticles.size;
+      if(paramsForParticles.size_random == false) pJS.particles.size_random = paramsForParticles.size_random;
+      if(paramsForParticles.nb) pJS.particles.nb = paramsForParticles.nb;
+      if(paramsForParticles.line_linked){
+        var paramsForLineLinked = paramsForParticles.line_linked;
+        if(paramsForLineLinked.enable_auto == false) pJS.particles.line_linked.enable_auto = paramsForLineLinked.enable_auto;
+        if(paramsForLineLinked.distance) pJS.particles.line_linked.distance = paramsForLineLinked.distance;
+        if(paramsForLineLinked.color) pJS.particles.line_linked.color = paramsForLineLinked.color;
+        if(paramsForLineLinked.opacity) pJS.particles.line_linked.opacity = paramsForLineLinked.opacity;
+        if(paramsForLineLinked.width) pJS.particles.line_linked.width = paramsForLineLinked.width;
+        if(paramsForLineLinked.condensed_mode){
+          var paramsForCondensedMode = paramsForLineLinked.condensed_mode;
+          if(paramsForCondensedMode.enable == false) pJS.particles.line_linked.condensed_mode.enable = paramsForCondensedMode.enable;
+          if(paramsForCondensedMode.rotateX) pJS.particles.line_linked.condensed_mode.rotateX = paramsForCondensedMode.rotateX;
+          if(paramsForCondensedMode.rotateY) pJS.particles.line_linked.condensed_mode.rotateY = paramsForCondensedMode.rotateY;
+        }
+      }
+      if(paramsForParticles.anim){
+        var paramsForAnim = paramsForParticles.anim;
+        if(paramsForAnim.enable == false) pJS.particles.anim.enable = paramsForAnim.enable;
+        if(paramsForAnim.speed) pJS.particles.anim.speed = paramsForAnim.speed;
+      }
+    }
+    if(params.interactivity){
+      var paramsForInteractivity = params.interactivity;
+      if(paramsForInteractivity.enable == false) pJS.interactivity.enable = paramsForInteractivity.enable;
+      if(paramsForInteractivity.mouse){
+        if(paramsForInteractivity.mouse.distance) pJS.interactivity.mouse.distance = paramsForInteractivity.mouse.distance;
+      }
+      if(paramsForInteractivity.detect_on) pJS.interactivity.detect_on = paramsForInteractivity.detect_on;
+      if(paramsForInteractivity.mode) pJS.interactivity.mode = paramsForInteractivity.mode;
+      if(paramsForInteractivity.line_linked){
+        if(paramsForInteractivity.line_linked.opacity) pJS.interactivity.line_linked.opacity = paramsForInteractivity.line_linked.opacity;
+      }
+      if(paramsForInteractivity.events){
+        var paramsForEvents = paramsForInteractivity.events;
+        if(paramsForEvents.onclick){
+          var paramsForOnclick = paramsForEvents.onclick;
+          if(paramsForOnclick.enable == false) pJS.interactivity.events.onclick.enable = false;
+          if(paramsForOnclick.mode != 'push') pJS.interactivity.events.onclick.mode = paramsForOnclick.mode;
+          if(paramsForOnclick.nb) pJS.interactivity.events.onclick.nb = paramsForOnclick.nb;
+        }
+      }
+    }
+    pJS.retina_detect = params.retina_detect;
+  }
+
+  /* convert hex colors to rgb */
+  pJS.particles.color_rgb = hexToRgb(pJS.particles.color);
+  pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
+
+  /* detect retina */
+  if(pJS.retina_detect && window.devicePixelRatio > 1){
+    pJS.retina = true;
+  
+    pJS.canvas.pxratio = window.devicePixelRatio
+    pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;
+    pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;
+    pJS.particles.anim.speed = pJS.particles.anim.speed * pJS.canvas.pxratio;
+    pJS.particles.line_linked.distance = pJS.particles.line_linked.distance * pJS.canvas.pxratio;
+    pJS.particles.line_linked.width = pJS.particles.line_linked.width * pJS.canvas.pxratio;
+    pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance * pJS.canvas.pxratio;
+  }
+
+
+  /* ---------- CANVAS functions ------------ */
+
+  pJS.fn.canvasInit = function(){
+    pJS.canvas.ctx = pJS.canvas.el.getContext('2d');
+  };
+
+  pJS.fn.canvasSize = function(){
+    pJS.canvas.el.width = pJS.canvas.w;
+    pJS.canvas.el.height = pJS.canvas.h;
+
+    window.onresize = function(){
+      if(pJS){
+        pJS.canvas.w = pJS.canvas.el.offsetWidth;
+        pJS.canvas.h = pJS.canvas.el.offsetHeight;
+
+        /* resize canvas */
+        if(pJS.retina){
+          pJS.canvas.w *= pJS.canvas.pxratio;
+          pJS.canvas.h *= pJS.canvas.pxratio;
+        }
+
+        pJS.canvas.el.width = pJS.canvas.w;
+        pJS.canvas.el.height = pJS.canvas.h;
+
+        /* repaint canvas */
+        pJS.fn.canvasPaint();
+        if(!pJS.particles.anim.enable){
+          pJS.fn.particlesRemove();
+          pJS.fn.canvasRemove();
+          launchParticles();
+        }
+      }
+    }
+  };
+
+  pJS.fn.canvasPaint = function(){
+    pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);
+  };
+
+  pJS.fn.canvasRemove = function(){
+    pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
+  }
+
+
+  /* --------- PARTICLES functions ----------- */
+
+  pJS.fn.particle = function(color, opacity, position){
+
+    /* position */
+    this.x = position ? position.x : Math.random() * pJS.canvas.w;
+    this.y = position ? position.y : Math.random() * pJS.canvas.h;
+
+    /* size */
+    this.radius = (pJS.particles.size_random ? Math.random() : 1) * pJS.particles.size;
+    if (pJS.retina) this.radius *= pJS.canvas.pxratio;
+
+    /* color */
+    this.color = color;
+
+    /* opacity */
+    this.opacity = opacity;
+
+    /* animation - velocity for speed */
+    this.vx = -.5 + Math.random();
+    this.vy = -.5 + Math.random();
+
+    /* draw function */
+    this.draw = function(){
+      pJS.canvas.ctx.fillStyle = 'rgba('+this.color.r+','+this.color.g+','+this.color.b+','+this.opacity+')';
+      pJS.canvas.ctx.beginPath();
+
+      switch(pJS.particles.shape){
+        case 'circle':
+          pJS.canvas.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+        break;
+
+        case 'edge':
+          pJS.canvas.ctx.rect(this.x, this.y, this.radius*2, this.radius*2);
+        break;
+
+        case 'triangle':
+          pJS.canvas.ctx.moveTo(this.x,this.y-this.radius);
+          pJS.canvas.ctx.lineTo(this.x+this.radius,this.y+this.radius);
+          pJS.canvas.ctx.lineTo(this.x-this.radius,this.y+this.radius);
+          pJS.canvas.ctx.closePath();
+        break;
+      }
+
+      pJS.canvas.ctx.fill();
+    }
+
+  };
+
+  pJS.fn.particlesCreate = function(){
+    for(var i = 0; i < pJS.particles.nb; i++) {
+      pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color_rgb, pJS.particles.opacity));
+    }
+  };
+
+  pJS.fn.particlesAnimate = function(){
+    for(var i = 0; i < pJS.particles.array.length; i++){
+      /* the particle */
+      var p = pJS.particles.array[i];
+
+      /* move the particle */
+      p.x += p.vx * (pJS.particles.anim.speed/2);
+      p.y += p.vy * (pJS.particles.anim.speed/2);
+
+      /* change particle position if it is out of canvas */
+      if(p.x - p.radius > pJS.canvas.w) p.x = p.radius;
+      else if(p.x + p.radius < 0) p.x = pJS.canvas.w + p.radius;
+      if(p.y - p.radius > pJS.canvas.h) p.y = p.radius;
+      else if(p.y + p.radius < 0) p.y = pJS.canvas.h + p.radius;
+
+      /* Check distance between each particle and mouse position */
+      for(var j = i + 1; j < pJS.particles.array.length; j++){
+        var p2 = pJS.particles.array[j];
+
+        /* link particles if enable */
+        if(pJS.particles.line_linked.enable_auto){
+          pJS.fn.vendors.distanceParticles(p,p2);
+        }
+
+        /* set interactivity if enable */
+        if(pJS.interactivity.enable){
+
+          /* interactivity mode */
+          switch(pJS.interactivity.mode){
+            case 'grab':
+              pJS.fn.vendors.interactivity.grabParticles(p,p2);
+            break;
+          }
+
+        }
+
+
+      }
+    }
+  };
+
+  pJS.fn.particlesDraw = function(){
+    /* clear canvas */
+    pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
+
+    /* move particles */
+    pJS.fn.particlesAnimate();
+
+    /* draw each particle */
+    for(var i = 0; i < pJS.particles.array.length; i++){
+      var p = pJS.particles.array[i];
+      p.draw('rgba('+p.color.r+','+p.color.g+','+p.color.b+','+p.opacity+')');
+    }
+
+  };
+
+  pJS.fn.particlesRemove = function(){
+    pJS.particles.array = [];
+  };
+
+
+  /* ---------- VENDORS functions ------------ */
+
+  pJS.fn.vendors.distanceParticles = function(p1, p2){
+
+    var dx = p1.x - p2.x,
+      dy = p1.y - p2.y,
+      dist = Math.sqrt(dx*dx + dy*dy);
+
+    /* Check distance between particle and mouse mos */
+    if(dist <= pJS.particles.line_linked.distance) {
+
+      /* draw the line */
+      var color_line = pJS.particles.line_linked.color_rgb_line;
+      pJS.canvas.ctx.beginPath();
+      pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+ (pJS.particles.line_linked.opacity-dist/pJS.particles.line_linked.distance) +')';
+      pJS.canvas.ctx.moveTo(p1.x, p1.y);
+      pJS.canvas.ctx.lineTo(p2.x, p2.y);
+      pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
+      pJS.canvas.ctx.stroke();
+      pJS.canvas.ctx.closePath();
+
+      /* condensed particles */
+      if(pJS.particles.line_linked.condensed_mode.enable){
+        var dx = p1.x - p2.x,
+            dy = p1.y - p2.y,
+            ax = dx/(pJS.particles.line_linked.condensed_mode.rotateX*1000),
+            ay = dy/(pJS.particles.line_linked.condensed_mode.rotateY*1000);
+        p2.vx += ax;
+        p2.vy += ay;
+      }
+
+    }
+  };
+
+  pJS.fn.vendors.interactivity.listeners = function(){
+
+    /* init el */
+    if(pJS.interactivity.detect_on == 'window'){
+      var detect_el = window;
+    }else{
+      var detect_el = pJS.canvas.el;
+    }
+
+    /* el on mousemove */
+    detect_el.onmousemove = function(e){
+
+      if(detect_el == window){
+        var pos_x = e.clientX,
+            pos_y = e.clientY;
+      }
+      else{
+        var pos_x = e.offsetX||e.clientX,
+            pos_y = e.offsetY||e.clientY;
+      }
+
+      if(pJS){
+
+        pJS.interactivity.mouse.pos_x = pos_x;
+        pJS.interactivity.mouse.pos_y = pos_y;
+
+        if(pJS.retina){
+          pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio;
+          pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio;
+        }
+
+        pJS.interactivity.status = 'mousemove';
+      }
+
+    };
+
+    /* el on onmouseleave */
+    detect_el.onmouseleave = function(e){
+
+      if(pJS){
+        pJS.interactivity.mouse.pos_x = 0;
+        pJS.interactivity.mouse.pos_y = 0;
+        pJS.interactivity.status = 'mouseleave';
+      }
+
+    };
+
+    /* el on onclick */
+    if(pJS.interactivity.events.onclick.enable){
+      switch(pJS.interactivity.events.onclick.mode){
+        case 'push':
+          detect_el.onclick = function(e){
+            if(pJS){
+              for(var i = 0; i < pJS.interactivity.events.onclick.nb; i++){
+                pJS.particles.array.push(
+                  new pJS.fn.particle(
+                    pJS.particles.color_rgb,
+                    pJS.particles.opacity,
+                    {
+                      'x': pJS.interactivity.mouse.pos_x,
+                      'y': pJS.interactivity.mouse.pos_y
+                    }
+                  )
+                )
+              }
+            }
+          }
+        break;
+
+        case 'remove':
+          detect_el.onclick = function(e){
+            pJS.particles.array.splice(0, pJS.interactivity.events.onclick.nb);
+          }
+        break;
+      }
+    }
+  };
+
+
+  pJS.fn.vendors.interactivity.grabParticles = function(p1, p2){
+    var dx = p1.x - p2.x,
+        dy = p1.y - p2.y,
+        dist = Math.sqrt(dx*dx + dy*dy);
+
+    var dx_mouse = p1.x - pJS.interactivity.mouse.pos_x,
+        dy_mouse = p1.y - pJS.interactivity.mouse.pos_y,
+        dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);
+
+    /* Check distance between 2 particles + Check distance between 1 particle and mouse position */
+    if(dist <= pJS.particles.line_linked.distance && dist_mouse <= pJS.interactivity.mouse.distance && pJS.interactivity.status == 'mousemove'){
+      /* Draw the line */
+      var color_line = pJS.particles.line_linked.color_rgb_line;
+      pJS.canvas.ctx.beginPath();
+      pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+ (pJS.interactivity.line_linked.opacity-dist_mouse/pJS.interactivity.mouse.distance) +')';
+      pJS.canvas.ctx.moveTo(p1.x, p1.y);
+      pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);
+      pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
+      pJS.canvas.ctx.stroke();
+      pJS.canvas.ctx.closePath();
+    }
+  };
+
+  pJS.fn.vendors.destroy = function(){
+    cancelAnimationFrame(pJS.fn.requestAnimFrame);
+    canvas_el.remove();
+    delete pJS;
+  };
+
+
+  /* --------- LAUNCH ----------- */
+
+  function launchParticles(){
+    pJS.fn.canvasInit();
+    pJS.fn.canvasSize();
+    pJS.fn.canvasPaint();
+    pJS.fn.particlesCreate();
+    pJS.fn.particlesDraw();
+  };
+
+
+  function launchAnimation(){
+    pJS.fn.particlesDraw();
+    pJS.fn.requestAnimFrame = requestAnimFrame(launchAnimation);
+  };
+
+
+  launchParticles();
+
+  if(pJS.particles.anim.enable){
+    launchAnimation();
+  }
+
+  if(pJS.interactivity.enable){
+    pJS.fn.vendors.interactivity.listeners();
+  }
+
+
+};
+
+/* --- VENDORS --- */
+
+window.requestAnimFrame = (function(){
+  return  window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame    ||
+    window.oRequestAnimationFrame      ||
+    window.msRequestAnimationFrame     ||
+    function(callback){
+      window.setTimeout(callback, 1000 / 60);
+    };
+})();
+
+window.cancelRequestAnimFrame = ( function() {
+  return window.cancelAnimationFrame         ||
+    window.webkitCancelRequestAnimationFrame ||
+    window.mozCancelRequestAnimationFrame    ||
+    window.oCancelRequestAnimationFrame      ||
+    window.msCancelRequestAnimationFrame     ||
+    clearTimeout
+} )();
+
+function hexToRgb(hex){
+  // By Tim Down - http://stackoverflow.com/a/5624139/3493650
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+     return r + r + g + g + b + b;
+  });
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+  } : null;
+};
+
+
+/* --- LAUNCH --- */
+
+window.particlesJS = function(tag_id, params){
+
+  /* no string id? so it's object params, and set the id with default id */
+  if(typeof(tag_id) != 'string'){
+    params = tag_id;
+    tag_id = 'particles-js';
+  }
+
+  /* no id? set the id to default id */
+  if(!tag_id){
+    tag_id = 'particles-js';
+  }
+
+  /* create canvas element */
+  var canvas_el = document.createElement('canvas');
+
+  /* set size canvas */
+  canvas_el.style.width = "100%";
+  canvas_el.style.height = "20rem";
+
+  /* append canvas */
+  var canvas = document.getElementById(tag_id).appendChild(canvas_el);
+
+  /* launch particle.js */
+  if(canvas != null){
+    launchParticlesJS(tag_id, params);
+  }
+
+};

mybusiness/src/main/resources/templates/visualization/index.html

@@ -1,10 +1,247 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
 <head>
+    <th:block th:include="include :: header('可视化')"/>
+</head>
+<head>
+    <meta charset="utf-8">
+    <title>通化市接口中台可视化中心</title>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="/visualization/css/index.css" th:href="@{/visualization/css/index.css}">
+    <link rel="stylesheet" href="/visualization/css/reset.css" th:href="@{/visualization/css/reset.css}">
+    <script type="text/javascript" src="js/jquery.js"></script>
 </head>
+<script type="text/javascript" src="../visualization/js/echarts.min.js" th:src="@{/visualization/js/echarts.min.js}"></script>
+<script language="JavaScript" src="../visualization/js/js.js" th:src="@{/visualization/js/js.js}"></script>
+
 <body>
-可视化主页
+<div class="th-container">
+    <!-- 导航开始 -->
+    <div class="th-header">
+        <div class="th-title">通化市接口中台可视化中心</div>
+        <div class="th-weather"><img th:src="@{/visualization/images/th-clock-icon.png}"><span id="showTime"></span></div>
+        <script>
+            var t = null;
+            t = setTimeout(time, 1000);
+
+            function time() {
+                clearTimeout(t);
+                dt = new Date();
+                var y = dt.getFullYear();
+                var mt = dt.getMonth() + 1;
+                var day = dt.getDate();
+                var h = dt.getHours();
+                var m = dt.getMinutes();
+                var s = dt.getSeconds();
+                document.getElementById("showTime").innerHTML = y + "-" + mt + "-" + day + "   " + h + ":" + m + ":" + s + "";
+                t = setTimeout(time, 1000);
+            }
+        </script>
+        <div class="th-top-btn-row">
+            <div class="th-top-btn">
+                <a href="#">管理端</a>
+            </div>
+            <div class="th-top-btn">
+                <a href="#">可视化</a>
+            </div>
+            <div class="th-top-btn">
+                <a href="#">大数据</a>
+            </div>
+        </div>
+    </div>
+    <!-- 导航结束 -->
+    <!-- 内容开始 -->
+    <div class="th-content">
+
+        <!-- 部门接口调用排名B -->
+        <div class="th-left">
+            <div class="th-left-con">
+                <div class="th-left-title">top部门接口调用排名</div>
+                <div class="th-left-ph" id="phb"></div>
+            </div>
+        </div>
+        <!-- 部门接口调用排名E -->
+
+        <!-- 接口地图展示B -->
+        <div class="th-mid-map">
+            <h1>全市数据共享情况</h1>
+            <div class="th-mid-map-con">
+                <div class="th-mid-sjk">
+                    <h2>省共享平台</h2>
+                    <h6>共享接口: <span>93</span></h6>
+                </div>
+                <div class="th-mid-shjk">
+                    <h2>市接口中台</h2>
+                    <h6>归集接口: <span>93</span></h6>
+                    <h6>共享接口: <span>7</span></h6>
+                </div>
+                <div class="th-mid-dw-con">
+                    <div class="th-mid-dw th-dw-1">
+                        <h2>住建局</h2>
+                        <h6>归集接口: <span>93</span></h6>
+                        <h6>共享接口: <span>7</span></h6>
+                    </div>
+                    <div class="th-mid-dw th-dw-2">
+                        <h2>住建局</h2>
+                        <h6>归集接口: <span>93</span></h6>
+                        <h6>共享接口: <span>7</span></h6>
+                    </div>
+                    <div class="th-mid-dw th-dw-3">
+                        <h2>住建局</h2>
+                        <h6>归集接口: <span>93</span></h6>
+                        <h6>共享接口: <span>7</span></h6>
+                    </div>
+                    <div class="th-mid-dw th-dw-4">
+                        <h2>住建局</h2>
+                        <h6>归集接口: <span>93</span></h6>
+                        <h6>共享接口: <span>7</span></h6>
+                    </div>
+                    <div class="th-mid-dw th-dw-5">
+                        <h2>住建局</h2>
+                        <h6>归集接口: <span>93</span></h6>
+                        <h6>共享接口: <span>7</span></h6>
+                    </div>
+                    <div class="th-mid-dw th-dw-6">
+                        <h2>住建局</h2>
+                        <h6>归集接口: <span>93</span></h6>
+                        <h6>共享接口: <span>7</span></h6>
+                    </div>
+                    <div class="th-mid-dw th-dw-7">
+                        <h2>住建局</h2>
+                        <h6>归集接口: <span>93</span></h6>
+                        <h6>共享接口: <span>7</span></h6>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <!-- 接口地图展示E -->
+
+        <!-- 右侧内容B -->
+        <div class="th-right-con">
+            <div class="th-right-con-1">
+                <ul>
+                    <li>
+                        <img th:src="@{/visualization/images/th-right1.png}">
+                        <div class="row-left">
+                            <span>200</span><h1>接口总数</h1>
+                        </div>
+                    </li>
+                    <li>
+                        <img th:src="@{/visualization/images/th-right2.png}">
+                        <div class="row-left">
+                            <span>200</span><h1>调用频次</h1>
+                        </div>
+                    </li>
+                    <li>
+                        <img th:src="@{/visualization/images/th-right3.png}">
+                        <div class="row-left">
+                            <span>200</span><h1>归集频次</h1>
+                        </div>
+                    </li>
+                    <li>
+                        <img th:src="@{/visualization/images/th-right4.png}">
+                        <div class="row-left">
+                            <span>200</span><h1>共享频次</h1>
+                        </div>
+                    </li>
+                    <li>
+                        <img th:src="@{/visualization/images/th-right5.png}">
+                        <div class="row-left">
+                            <span>200</span><h1>接入部门</h1>
+                        </div>
+                    </li>
+                    <li>
+                        <img th:src="@{/visualization/images/th-right6.png}">
+                        <div class="row-left">
+                            <span>200</span><h1>接口故障</h1>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="th-right-con-2row">
+                <div class="th-right-con-2 mg-r1">
+                    <h4>接口占比</h4>
+                    <div  id="jkzb" style="width: 280px; height: 200px;"></div>
+                </div>
+                <div class="th-right-con-2 mg-r1">
+                    <h4>接口使用</h4>
+                    <div  id="jksy" style="width: 280px; height: 200px;"></div>
+                </div>
+                <div class="th-right-con-2">
+                    <h4>接入部门</h4>
+                    <div  id="jrbm" style="width: 280px; height: 200px;"></div>
+                </div>
+            </div>
+            <div class="th-right-con-3row">
+                <div class="th-right-con-3 mg-r2">
+                    <h4>市主要归集接口</h4>
+                    <div  id="szygj" style="width: 400px; height: 200px;"></div>
+                </div>
+                <div class="th-right-con-3">
+                    <h4>市主要共享接口</h4>
+                    <div  id="szygx" style="width: 400px; height: 200px;"></div>
+                </div>
+            </div>
+            <div class="th-right-con-4">
+                <!-- <h4>接口使用频次</h4>
+                <div  id="jksypc" style="width: 800px; height: 280px;"></div> -->
+                <!-- HTML页面布局 -->
+                <div id="tab">
+                    <ul>
+                        <li class="on">年接口使用频次</li>
+                        <li class="off">月接口使用频次</li>
+                        <li class="off">日接口使用频次</li>
+                    </ul>
+                    <div id="firstPage" class="show">
+                        <div  id="jksypc" style="width: 800px; height: 220px;"></div>
+                    </div>
+                    <div id="secondPage" class="hide">
+                        <a href="#">40平出租屋大改造 美少女的混搭小窝</a><br>
+                        <a href="#">经典清新简欧爱家 90平老房焕发新生</a><br>
+
+                    </div>
+                    <div id="thirdPage" class="hide">
+                        <a href="#">通州豪华3居260万 二环稀缺2居250w甩</a><br>
+                        <a href="#">西3环通透2居290万 130万2居限量抢购</a><br>
+
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <!-- 右侧内容E -->
+    </div>
+    <!-- 内容结束 -->
+</div>
+<script>
+    window.onload = function() {
+        var myTab = document.getElementById("tab"); //整个div
+        var myUl = myTab.getElementsByTagName("ul")[0]; //一个节点
+        var myLi = myUl.getElementsByTagName("li"); //数组
+        var myDiv = myTab.getElementsByTagName("div"); //数组
+
+        for (var i = 0; i < myLi.length; i++) {
+            myLi[i].index = i;
+            myLi[i].onclick = function() {
+                for (var j = 0; j < myLi.length; j++) {
+                    myLi[j].className = "off";
+                    myDiv[j].className = "hide";
+                }
+                this.className = "on";
+                myDiv[this.index].className = "show";
+            }
+        }
+    }
+</script>
+<script type="text/javascript" src="../visualization/allcharts/th-echart1.js" th:src="@{/visualization/allcharts/th-echart1.js}" rel="stylesheet"></script>
+<script type="text/javascript" src="../visualization/allcharts/eventPieTh.js" th:src="@{/visualization/allcharts/eventPieTh.js}" rel="stylesheet"></script>
+<script type="text/javascript" src="../visualization/allcharts/eventPieTh2.js" th:src="@{/visualization/allcharts/eventPieTh2.js}" rel="stylesheet"></script>
+<script type="text/javascript" src="../visualization/allcharts/humanTh.js" th:src="@{/visualization/allcharts/humanTh.js}" rel="stylesheet"></script>
+<script type="text/javascript" src="../visualization/allcharts/jkTh.js" th:src="@{/visualization/allcharts/jkTh.js}" rel="stylesheet"></script>
+<script type="text/javascript" src="../visualization/allcharts/jkTh2.js" th:src="@{/visualization/allcharts/jkTh2.js}" rel="stylesheet"></script>
+<script type="text/javascript" src="../visualization/allcharts/jkpcTh.js" th:src="@{/visualization/allcharts/jkpcTh.js}" rel="stylesheet"></script>
 </body>
 </html>