可视化2.0

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

@@ -184,6 +184,7 @@
 				</h6>
                 <ul class="nav navbar-top-links navbar-right welcome-message">
 					<li><a title="可视化" th:href="@{/VisualizationController/index}" target="_blank"><i class="fa fa-video-camera"></i> 可视化</a></li>
+					<li><a title="可视化" th:href="@{/VisualizationController/edition2/index2}" target="_blank"><i class="fa fa-video-camera"></i> 可视化2.0</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/java/com/business/controller/VisualizationController.java

@@ -15,6 +15,11 @@ public class VisualizationController extends BaseController {
         return "/visualization/index";
     }
 
+    @GetMapping("edition2/index2")
+    public String index2(){
+        return "/visualization/edition2/index2";
+    }
+
     public AjaxResult initVisualization(){
        return null;
     }

mybusiness/src/main/resources/static/visualization/js/echarts-tooltip-carousel.js

@@ -0,0 +1,227 @@
+/**
+ * Created by chengwb on 2016/9/3.
+ */
+(function (global) {
+  global.tools = global.tools || {};
+
+  /**
+   * echarts tooltip轮播
+   * @param chart ECharts实例
+   * @param chartOption echarts的配置信息
+   * @param options object 选项
+   * {
+   *  interval    轮播时间间隔，单位毫秒，默认为2000
+   *  loopSeries  boolean类型，默认为false。
+   *              true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
+   * 	seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
+   * 	            当loopSeries为true时，从seriesIndex系列开始执行。
+   *  updateData  自定义更新数据的函数，默认为null；
+   *              用于类似于分页的效果，比如总数据有20条，chart一次只显示5条，全部数据可以分4次显示。
+   * }
+   * @returns {{clearLoop: clearLoop}}
+   */
+  tools.loopShowTooltip = function (chart, chartOption, options) {
+    let defaultOptions = {
+      interval: 2000,
+      loopSeries: false,
+      seriesIndex: 0,
+      updateData: null
+    };
+
+    if (!chart || !chartOption) {
+      return;
+    }
+
+    let dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行
+    let seriesIndex = 0; // 系列索引
+    let timeTicket = 0;
+    let seriesLen = chartOption.series.length; // 系列个数
+    let dataLen = 0; // 某个系列数据个数
+    let chartType; // 系列类型
+    let first = true;
+    let lastShowSeriesIndex = 0;
+    let lastShowDataIndex = 0;
+    if (seriesLen === 0) {
+      return;
+    }
+
+    //待处理列表
+    //不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个
+    //循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个
+    //要不要添加开始series索引和开始的data索引？
+
+    if (options) {
+      options.interval = options.interval || defaultOptions.interval;
+      options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
+      options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
+      options.updateData = options.updateData || defaultOptions.updateData;
+    } else {
+      options = defaultOptions;
+    }
+
+    //如果设置的seriesIndex无效，则默认为0
+    if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
+      seriesIndex = 0;
+    } else {
+      seriesIndex = options.seriesIndex;
+    }
+
+    /**
+     * 清除定时器
+     */
+    function clearLoop() {
+      if (timeTicket) {
+        clearInterval(timeTicket);
+        timeTicket = 0;
+      }
+      chart.off('mousemove', stopAutoShow);
+      zRender.off('mousemove', zRenderMouseMove);
+      zRender.off('globalout', zRenderGlobalOut);
+    }
+
+    /**
+     * 取消高亮
+     */
+    function cancelHighlight() {
+      /**
+       * 如果dataIndex为0表示上次系列完成显示，如果是循环系列，且系列索引为0则上次是seriesLen-1，否则为seriesIndex-1；
+       * 如果不是循环系列，则就是当前系列；
+       * 如果dataIndex>0则就是当前系列。
+       */
+      let tempSeriesIndex = dataIndex === 0 ?
+        (options.loopSeries ?
+          (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1)
+          : seriesIndex)
+        : seriesIndex;
+      let tempType = chartOption.series[tempSeriesIndex].type;
+
+      if (tempType === 'pie' || tempType === 'radar') {
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: lastShowSeriesIndex,
+          dataIndex: lastShowDataIndex
+        });//wait 系列序号为0且循环系列，则要判断上次的系列类型是否是pie、radar
+      }
+    }
+
+    /**
+     * 自动轮播tooltip
+     */
+    function autoShowTip() {
+      let invalidSeries = 0;
+      let invalidData = 0;
+
+      function showTip() {
+        //判断是否更新数据
+        if (dataIndex === 0 && !first && typeof options.updateData === "function") {
+          options.updateData();
+          chart.setOption(chartOption);
+        }
+
+        let series = chartOption.series;
+        let currSeries = series[seriesIndex];
+        if (!series || series.length === 0 ||
+          !currSeries || !currSeries.type || !currSeries.data ||
+          !currSeries.data.length) {
+          return;
+        }
+        chartType = currSeries.type; // 系列类型
+        dataLen = currSeries.data.length; // 某个系列的数据个数
+
+        let tipParams = {seriesIndex: seriesIndex};
+        switch (chartType) {
+          case 'pie':
+          case 'map':
+          case 'chord':
+            tipParams.name = currSeries.data[dataIndex].name;
+            break;
+          case 'radar': // 雷达图
+            tipParams.seriesIndex = seriesIndex;
+            tipParams.dataIndex = dataIndex;
+            break;
+          default:
+            tipParams.dataIndex = dataIndex;
+            break;
+        }
+
+        if (chartType === 'pie' || chartType === 'radar') {
+          if (!first) {
+            cancelHighlight();
+          }
+
+          // 高亮当前图形
+          chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: seriesIndex,
+            dataIndex: dataIndex
+          });
+        }
+
+        // 显示 tooltip
+        tipParams.type = 'showTip';
+
+        // 防止updateData时先处理tooltip后刷新数据导出tooltip显示不正确
+        setTimeout(() => {
+          chart.dispatchAction(tipParams);
+        }, 0);
+
+        lastShowSeriesIndex = seriesIndex;
+        lastShowDataIndex = dataIndex;
+        dataIndex = (dataIndex + 1) % dataLen;
+        if (options.loopSeries && dataIndex === 0) { // 数据索引归0表示当前系列数据已经循环完
+          invalidData = 0;
+          seriesIndex = (seriesIndex + 1) % seriesLen;
+          if (seriesIndex === options.seriesIndex) {
+            invalidSeries = 0;
+          }
+        }
+
+        first = false;
+      }
+
+      showTip();
+      timeTicket = setInterval(showTip, options.interval);
+    }
+
+    // 关闭轮播
+    function stopAutoShow() {
+      if (timeTicket) {
+        clearInterval(timeTicket);
+        timeTicket = 0;
+
+        if (chartType === 'pie' || chartType === 'radar') {
+          cancelHighlight();
+        }
+      }
+    }
+
+    let zRender = chart.getZr();
+
+    function zRenderMouseMove(param) {
+      if (param.event) {
+        //阻止canvas上的鼠标移动事件冒泡
+        param.event.cancelBubble = true;
+      }
+
+      stopAutoShow();
+    }
+
+    // 离开echarts图时恢复自动轮播
+    function zRenderGlobalOut() {
+      if (!timeTicket) {
+        autoShowTip();
+      }
+    }
+
+    // 鼠标在echarts图上时停止轮播
+    chart.on('mousemove', stopAutoShow);
+    zRender.on('mousemove', zRenderMouseMove);
+    zRender.on('globalout', zRenderGlobalOut);
+
+    autoShowTip();
+
+    return {
+      clearLoop: clearLoop
+    };
+  };
+})(window);

mybusiness/src/main/resources/static/visualization/js/jquery.ba-resize.min.js

@@ -0,0 +1,82 @@
+/*
+ * jQuery resize event - v1.1 - 3/14/2010
+ * http://benalman.com/projects/jquery-resize-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function($, h, c) {
+	var a = $([]),
+		e = $.resize = $.extend($.resize, {}),
+		i, k = "setTimeout",
+		j = "resize",
+		d = j + "-special-event",
+		b = "delay",
+		f = "throttleWindow";
+	e[b] = 250;
+	e[f] = true;
+	$.event.special[j] = {
+		setup: function() {
+			if (!e[f] && this[k]) {
+				return false
+			}
+			var l = $(this);
+			a = a.add(l);
+			$.data(this, d, {
+				w: l.width(),
+				h: l.height()
+			});
+			if (a.length === 1) {
+				g()
+			}
+		},
+		teardown: function() {
+			if (!e[f] && this[k]) {
+				return false
+			}
+			var l = $(this);
+			a = a.not(l);
+			l.removeData(d);
+			if (!a.length) {
+				clearTimeout(i)
+			}
+		},
+		add: function(l) {
+			if (!e[f] && this[k]) {
+				return false
+			}
+			var n;
+
+			function m(s, o, p) {
+				var q = $(this),
+					r = $.data(this, d);
+				r.w = o !== c ? o : q.width();
+				r.h = p !== c ? p : q.height();
+				n.apply(this, arguments)
+			}
+			if ($.isFunction(l)) {
+				n = l;
+				return m
+			} else {
+				n = l.handler;
+				l.handler = m
+			}
+		}
+	};
+
+	function g() {
+		i = h[k](function() {
+			a.each(function() {
+				var n = $(this),
+					m = n.width(),
+					l = n.height(),
+					o = $.data(this, d);
+				if (m !== o.w || l !== o.h) {
+					n.trigger(j, [o.w = m, o.h = l])
+				}
+			});
+			g()
+		}, e[b])
+	}
+})(jQuery, this);

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

@@ -0,0 +1,241 @@
+$(function() {
+	//地图
+   setInterval("autochange()",10000);
+   
+   //背景
+   var wid = $(document).width();
+   var hei = $(document).height();
+   $("#particles-js").height(hei);
+   $("#particles-js").width(wid);
+   
+   
+   //时间    间隔一秒执行一次获取当前时间的方法
+   setInterval(function () { CurrentTime() }, 1000);
+   
+   
+   // 接口占比
+jkzb();   
+   // 归集数据/接口排名
+jkgj();
+jkgj2();
+
+// 切换
+var i=0;//初始记录用户鼠标经过是第几个li
+    var canmove=true;
+    $('.tab_tit span').mouseenter(function(i){
+        canmove=false;
+        clearInterval(li_timer);
+        i=$(this).index();
+        $(this).addClass('on').siblings().removeClass('on');
+		$(this).attr('v',i);
+		var e = $('.tab_div1 .jkgj_tab').index();
+		$('.tab_div1 .jkgj_tab').attr('v',i);
+        $('.tab_div1 .jkgj_tab').hide();
+        $('.tab_div1 .jkgj_tab').eq(i).show(); 
+		
+		if($('.tab_div1 .jkgj_tab').eq(1).is(':hidden')){
+	
+			// myChart22.resize();
+			// myChart33.removeAttribute("_echarts_instance_");
+			// myChart22.setOption(option,true);
+jkgj();
+		}else if($('.tab_div1 .jkgj_tab').eq(0).is(':hidden')){
+	
+			// myChart33.resize();
+			// myChart22.removeAttribute("_echarts_instance_");
+			// myChart33.setOption(option,true);
+	jkgj2();
+	
+		}
+		
+		
+    });
+ 
+    $(".tab_div1").mouseenter(function(){//只要用户鼠标在这个tab1区域内，就不自动跳转
+        canmove=false;
+    }).mouseleave(function(){
+        clearInterval(li_timer);
+        setTimeout(function(){canmove=true;},2000);//两秒后自动切换
+    });
+
+    function li_timer(){
+		// wid = 100;
+		
+        if(canmove){
+            i++;
+            if(i==$('.tab_tit span').length){
+                i=0;
+            }
+            $('.tab_tit span').eq(i).addClass('on').siblings().removeClass('on');
+            $('.tab_div1 .jkgj_tab').hide();
+            $('.tab_div1 .jkgj_tab').eq(i).show(); 
+			
+        }
+ 
+    }
+    setInterval(li_timer,5000);//每两秒切换
+
+
+
+// 省、市接口调用切换
+sjk1();
+sjk2();
+shjk1();
+shjk2();
+
+
+// 切换
+var u=0;//初始记录用户鼠标经过是第几个li
+    var canmoveu=true;
+    $('.tab_tit2 span').mouseenter(function(i){
+        canmoveu=false;
+        clearInterval(li_timer2);
+        u=$(this).index();
+        $(this).addClass('on').siblings().removeClass('on');
+        $('.tab_div2').hide();
+        $('.tab_div2').eq(u).show(); 
+		if($('.tab_div2').eq(1).is(':hidden')){
+		
+		shjk1();
+		shjk2();	
+		}else if($('.tab_div2').eq(1).is(':hidden')){
+		sjk1();
+		sjk2();
+			
+		}
+		
+		
+    });
+ 
+    $(".tab_div2").mouseenter(function(){//只要用户鼠标在这个tab1区域内，就不自动跳转
+        canmove=false;
+    }).mouseleave(function(){
+        clearInterval(li_timer2);
+        setTimeout(function(){canmoveu=true;},2000);//两秒后自动切换
+    });
+
+    function li_timer2(){
+		// wid = 100;
+        if(canmoveu){
+            u++;
+            if(u==$('.tab_tit2 span').length){
+                u=0;
+            }
+            $('.tab_tit2 span').eq(u).addClass('on').siblings().removeClass('on');
+            $('.tab_div2').hide();
+            $('.tab_div2').eq(u).show(); 
+			
+        }
+ 
+    }
+    setInterval(li_timer2,5000);//每两秒切换
+	
+	
+	// 归集数据分析
+	gjsj();
+	// 弹框数据归集
+	// tk_gjsj();
+	
+	
+	
+
+	
+	
+
+});
+
+
+
+// 时间
+//时间
+function getNow(Mytime) { return Mytime < 10 ? '0' + Mytime : Mytime; }
+        function CurrentTime() {
+            var myDate = new Date();
+            //获取当前年份
+            var year = myDate.getFullYear();
+            //获取当前月份
+            var month = myDate.getMonth() + 1;
+            //获取当前日期
+            var date = myDate.getDate();
+            //获取当前小时数(0-23)
+            var h = myDate.getHours();
+            //获取当前分钟数(0-59)
+            var m = myDate.getMinutes();
+            var s = myDate.getSeconds();
+            var now = year + '-' + getNow(month)+ '-' + getNow(date);
+            var now2 =  getNow(h)+ ':' + getNow(m) + ':' + getNow(s);
+            $(".nyr").text(now);
+            $(".sfm").text(now2);
+        }
+
+
+
+
+//地图
+	var obj = [
+			function() {
+				$(".map_img").removeClass("movefd");
+				$(".map_img").addClass("movesx");
+			},function() {
+				$(".map_img").removeClass("movesx");
+				$(".map_img").addClass("movess");
+			},
+			function() {
+				$(".map_img").removeClass("movess");
+				$(".map_img").addClass("movexj");
+			},
+			function() {
+				$(".map_img").removeClass("movexj");
+				$(".map_img").addClass("movefd");
+			}
+		]
+		$.each(obj, function(i) {
+			// Replace 500 with whatever you want 
+			setInterval(this, 10000 * i);
+		});
+		
+		
+		
+			
+			function mp_id1() {
+				$('.map_id1').addClass("mp_hide").removeClass("mp_show");
+				$('.map_id2').addClass("mp_show").removeClass("mp_hide");
+			}
+			function mp_id2() {
+				$('.map_id2').addClass("mp_hide").removeClass("mp_show");
+				$('.map_id3').addClass("mp_show").removeClass("mp_hide");
+			}
+			function mp_id3() {
+				$('.map_id3').addClass("mp_hide").removeClass("mp_show");
+				$('.map_id4').addClass("mp_show").removeClass("mp_hide");
+			}
+			function mp_id4() {
+				$('.map_id4').addClass("mp_hide").removeClass("mp_show");
+				$('.map_id1').addClass("mp_show").removeClass("mp_hide");
+			}
+	
+		
+		// 设置一个判断计数器
+		var count=0;
+		// 根据计数器状态切换响应的皮肤
+		function autochange() {
+		 if (count==0) {
+		 mp_id1();
+		 }
+		 if (count==1) {
+		 mp_id2();
+		 }
+		 if (count==2) {
+		 mp_id3();
+		 }
+		 if (count==3) {
+		 mp_id4();
+		 }
+		 count=count+1;
+		 if (count>3) {
+		 count=0;
+		 }
+		}
+		
+		
+		

mybusiness/src/main/resources/templates/visualization/edition2/index2.html

@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+	<head>
+		<meta charset="utf-8">
+		<title>通化市应急</title>
+		<link  th:href="@{/visualization/css/th_yj.css}"  rel="stylesheet"/>
+		<script type="text/javascript" th:href="@{/visualization/js/jquery-3.3.1.min.js}"></script>
+		<script type="text/javascript" th:href="@{/visualization/js/echarts.js}"></script>
+		<script type="text/javascript" th:href="@{/visualization/js/jquery.min.js}"></script>
+		<script type="text/javascript" th:href="@{/visualization/js/jquery.ba-resize.min.js}"></script>
+		<script type="text/javascript" th:href="@{/visualization/js/th_jk.js}"></script>
+	</head>
+	<body>
+		<div id="particles-js">
+			<canvas id="canvas"  style="width: 100%; height: 100%;"></canvas>
+		</div>
+		<div class="header clearfix">
+			<div class="time fl">
+				<span class="nyr">2022-08-17</span>&nbsp;&nbsp;&nbsp;<span class="sfm">09:35:57</span>
+			</div>
+			<h1 class="logo"><img th:src="@{/visualization/images/thqzj_logo.png}"/></h1>
+			<div class="header_nav fr">
+				<a class="on">大数据</a>
+				<a>接入部门</a>
+				<a>接口故障<i>（0）</i></a>
+			</div>
+		</div >
+		<div class="content clearfix">
+			<div class="fl con_left1">
+				<div class="con_sk con_bg clearfix">
+					<i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"/></i>
+					<div class="data1 data_left">
+						<div class="qiu">
+							<p>43/43个</p>
+						</div>
+						<span>市归集接口数</span>
+					</div>
+					<div class="data1">
+						<div class="qiu">
+							<p>43/43个</p>
+						</div>
+						<span>市归集接口数</span>
+					</div>
+					<div class="data1">
+						<div class="qiu">
+							<p>43/43个</p>
+						</div>
+						<span>市归集接口数</span>
+					</div>
+					<div class="data1">
+						<div class="qiu">
+							<p>43/43个</p>
+						</div>
+						<span>市归集接口数</span>
+					</div>
+				</div>
+				<div class="jkzb con_bg">
+					<i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"/></i>
+					
+					<div class="con_tit clearfix">
+						<div class="fl div_tit">接口占比</div>
+						<div class="tit_date"><i></i>2021-01-01&nbsp;至&nbsp;2022-08-08</div>
+					</div>
+					<div id="jkzb"></div>
+					<div class="jkzb_txt">
+						<div class="sgj jkzb_list">
+							<h3><i></i>市归集</h3>
+							<p><span>2,384</span><span>20%</span><b><i class="ss"></i>15</b></p>
+						</div>
+						<div class="sgx jkzb_list">
+							<h3><i></i>市共享</h3>
+							<p><span>4,162</span><span>20%</span><b><i class="ss"></i>15</b></p>
+						</div>
+						<div class="sgj2 jkzb_list">
+							<h3><i></i>省归集</h3>
+							<p><span>6,681</span><span>20%</span><b><i class="ss"></i>15</b></p>
+						</div>
+						<div class="sgx jkzb_list">
+							<h3><i></i>省共享</h3>
+							<p><span>10,324</span><span>20%</span><b><i class="ss"></i>15</b></p>
+						</div>
+					</div>
+
+				</div>
+			</div>
+			<div id="map_div" class="fl con_left2">
+				<img th:src="@{/visualization/images/map.png}" class="map_img"/>
+				<div class="map_id map_id1 mp_show">
+					<div class="map_sj">
+						<i class="map_wz4"></i>
+						<i class="map_wz3"></i>
+						<i class="map_wz2"></i>
+						<i class="map_wz1"></i>
+					</div>
+					<div class="map_dx">
+						<div class="map_txt">
+							<h1>通化市1XXX部门</h1>
+							<p>联系人：柳爽</p>
+							<p>电话：15636365656</p>
+							<p>地址：通化市童话街璐璐大厦2256</p>
+						</div>
+						<i class="map_d"></i>
+						<i class="map_x"></i>
+					</div>
+				</div>
+				<div class="map_id map_id2">
+						<div class="map_sj">
+							<i class="map_wz4"></i>
+							<i class="map_wz3"></i>
+							<i class="map_wz2"></i>
+							<i class="map_wz1"></i>
+						</div>
+						<div class="map_dx">
+							<div class="map_txt">
+								<h1>通化市2XXX部门</h1>
+								<p>联系人：柳爽</p>
+								<p>电话：15636365656</p>
+								<p>地址：通化市童话街璐璐大厦2256</p>
+							</div>
+							<i class="map_d"></i>
+							<i class="map_x"></i>
+						</div>
+				</div>
+				<div class="map_id map_id3">
+						<div class="map_sj">
+							<i class="map_wz4"></i>
+							<i class="map_wz3"></i>
+							<i class="map_wz2"></i>
+							<i class="map_wz1"></i>
+						</div>
+						<div class="map_dx">
+							<div class="map_txt">
+								<h1>通化市3XXX部门</h1>
+								<p>联系人：柳爽</p>
+								<p>电话：15636365656</p>
+								<p>地址：通化市童话街璐璐大厦2256</p>
+							</div>
+							<i class="map_d"></i>
+							<i class="map_x"></i>
+						</div>
+				</div>
+				<div class="map_id map_id4">
+						<div class="map_sj">
+							<i class="map_wz4"></i>
+							<i class="map_wz3"></i>
+							<i class="map_wz2"></i>
+							<i class="map_wz1"></i>
+						</div>
+						<div class="map_dx">
+							<div class="map_txt">
+								<h1>通化市4XXX部门</h1>
+								<p>联系人：柳爽</p>
+								<p>电话：15636365656</p>
+								<p>地址：通化市童话街璐璐大厦2256</p>
+							</div>
+							<i class="map_d"></i>
+							<i class="map_x"></i>
+						</div>
+					</div>
+				
+			</div>
+			<div class="fr con_right">
+				<div class="jkgj con_bg">
+					<i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"></i>
+					<div class="con_tit clearfix">
+						<div class="fl div_tit">归集数据/接口排名</div>
+						<div class="tab_tit"><span class="on" id="shpm">数据排名</span><span id="jkpm">接口排名</span></div>
+					</div>
+					<div class="tab_div1">
+					<div id="jkgj" class="jkgj_tab active" style="display: block;"></div>
+					<div id="jkgj2" class="jkgj_tab" style="display: none;"></div>
+				</div>
+				</div>
+				
+			</div>
+			<div class="clearfix"></div>
+			<div class="con_bottom1 con_bg fl">
+				<i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"></i>
+				<div class="con_tit clearfix">
+					<div class="fl div_tit2">省、市接口调用频次（TOP20）</div>
+					<div class="tab_tit2"><span class="on" id="shjk">省接口调用频次</span><span id="sjk">市接口调用频次</span></div>
+				</div>
+				<div class="tab_div2 clearfix" style="display: block;">
+					<div id="shjk_div1" class=" fl"></div>
+					<div id="shjk_div2" class=" fl"></div>
+				</div>
+				<div class="tab_div2 clearfix" style="display: none;" >
+					<div id="sjk_div1" class=" fl"></div>
+					<div id="sjk_div2" class=" fl"></div>
+				</div>
+			</div>
+			<div class="con_bottom2 con_bg fl">
+				<i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"></i>
+				<div class="con_tit clearfix">
+					<div class="fl div_tit2">归集数据分析</div>
+					<div class="tit_date"><i></i>2021-01-01&nbsp;至&nbsp;2022-08-08</div>
+				</div>
+				<div id="gjsj"></div>
+			</div>
+		</div>
+		
+		<!-- 弹框 开始-->
+		<!-- <iframe id="tk_iframe" th:src="@{tk_iframe.html"></iframe> -->
+		<!-- 弹框 结束-->
+		<script>
+			//宇宙特效
+			"use strict";
+			var canvas = document.getElementById('canvas'),
+			  ctx = canvas.getContext('2d'),
+			  w = canvas.width = window.innerWidth,
+			  h = canvas.height = window.innerHeight,
+
+			  hue = 217,
+			  stars = [],
+			  count = 0,
+			  maxStars = 1300;//星星数量
+
+			var canvas2 = document.createElement('canvas'),
+			  ctx2 = canvas2.getContext('2d');
+			canvas2.width = 100;
+			canvas2.height = 100;
+			var half = canvas2.width / 2,
+			  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
+			gradient2.addColorStop(0.025, '#CCC');
+			gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
+			gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
+			gradient2.addColorStop(1, 'transparent');
+
+			ctx2.fillStyle = gradient2;
+			ctx2.beginPath();
+			ctx2.arc(half, half, half, 0, Math.PI * 2);
+			ctx2.fill();
+
+			// End cache
+
+			function random(min, max) {
+			  if (arguments.length < 2) {
+				max = min;
+				min = 0;
+			  }
+
+			  if (min > max) {
+				var hold = max;
+				max = min;
+				min = hold;
+			  }
+
+			  return Math.floor(Math.random() * (max - min + 1)) + min;
+			}
+
+			function maxOrbit(x, y) {
+			  var max = Math.max(x, y),
+				diameter = Math.round(Math.sqrt(max * max + max * max));
+			  return diameter / 2;
+			  //星星移动范围，值越大范围越小，
+			}
+
+			var Star = function() {
+
+			  this.orbitRadius = random(maxOrbit(w, h));
+			  this.radius = random(60, this.orbitRadius) / 8;
+			  //星星大小
+			  this.orbitX = w / 2;
+			  this.orbitY = h / 2;
+			  this.timePassed = random(0, maxStars);
+			  this.speed = random(this.orbitRadius) / 50000;
+			  //星星移动速度
+			  this.alpha = random(2, 10) / 10;
+
+			  count++;
+			  stars[count] = this;
+			}
+
+			Star.prototype.draw = function() {
+			  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
+				y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
+				twinkle = random(10);
+
+			  if (twinkle === 1 && this.alpha > 0) {
+				this.alpha -= 0.05;
+			  } else if (twinkle === 2 && this.alpha < 1) {
+				this.alpha += 0.05;
+			  }
+
+			  ctx.globalAlpha = this.alpha;
+			  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
+			  this.timePassed += this.speed;
+			}
+
+			for (var i = 0; i < maxStars; i++) {
+			  new Star();
+			}
+
+			function animation() {
+			  ctx.globalCompositeOperation = 'source-over';
+			  ctx.globalAlpha = 0.5; //尾巴
+			  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
+			  ctx.fillRect(0, 0, w, h)
+
+			  ctx.globalCompositeOperation = 'lighter';
+			  for (var i = 1, l = stars.length; i < l; i++) {
+				stars[i].draw();
+			  };
+			  window.requestAnimationFrame(animation);
+			}
+			animation();
+		</script>
+		<script type="text/javascript" th:href="@{/visualization/js/echarts_div.js}"></script>
+		<script type="text/javascript" th:href="@{/visualization/js/echarts-tooltip-carousel.js}"></script>
+	</body>
+</html>