热词分析功能
热词分析功能可以根据输入的想要的n的数量来统计热词榜，并且用图表展示信息，并可以实现图标联动。
view.jsp文件代码：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="ISO-8859-1"> 7 <title>热词分析</title> 8 <script src="js/jquery.min.js"></script> 9 <script src="js/echart3.js"></script> 10 <script src="echarts.js"></script> 11 <script src="echarts-wordcloud.js"></script> 12 <!--<link rel="stylesheet" href="./css/font.css">--> 13 <link rel="stylesheet" href="./css/index.css"> 14 <link rel="stylesheet" href="./css/iconfont.css"> 15 16 <link rel="stylesheet" href="layui/css/layui.css"> 17 18 <script src="./lib/layui/layui.js" charset="utf-8"></script> 19 <script type="text/javascript" src="./js/index.js"></script> 20 <script src="./js/jquery.js"></script> 21 <script src="./js/jquery.min.js"></script> 22 <script src="./js/survey.js"></script> 23 24 <style> 25 26 27 #main{ 28 100%; 29 height: 1500px; 30 31 border:1px solid #ddd; 32 float:center; 33 } 34 #FontScroll{ 35 100%; 36 height: 245px; 37 overflow: hidden; 38 } 39 #FontScroll ul li{ 40 height: 32px; 41 100%; 42 color: #ffffff; 43 line-height: 32px; 44 overflow: hidden; 45 font-size: 14px; 46 } 47 #FontScroll ul li i{ 48 color: red; 49 } 50 .layui-table td, .layui-table th{ 51 min- auto !important; 52 } 53 54 55 .container,.cloud{ 56 display: inline-block; 57 } 58 .container{ 59 100%; 60 height: 600px; 61 overflow: auto; 62 text-align: left; 63 } 64 .cloud{ 65 background-color: #000; 66 500px; 67 height: 600px; 68 text-align: center; 69 border-radius: 12px; 70 } 71 #chaxun input[type=button]{ 72 background-color: #0066FF; 73 border: none; 74 color: white; 75 padding: 16px 16px; 76 text-decoration: none; 77 margin: 4px 2px; 78 cursor: pointer; 79 80 } 81 form{ 82 padding:20px 0; 83 } 84 form input{ 85 border:1px solid white; 86 margin:10px 10px 10px auto;/*上 右 下 左*/ 87 padding:9px; 88 200px; 89 font-family:"黑体";/*设置字体*/ 90 border-radius:30px;/*H5设置圆角边框*/ 91 font-size:15px; 92 font-weight:300; 93 text-align:center; 94 box-shadow: -1px -1px 1px 1px black ; 95 } 96 form input:hover{ 97 background-color:pink; 98 } 99 .button{ 100 border-radius:10px; 101 border:0; 102 height:40px; 103 padding:5px 10px; 104 font-family:"楷体"; 105 font-size:18px;/*设置字体大小*/ 106 box-shadow: 1px 1px 1px 1px black; 107 background:pink; 108 } 109 </style> 110 </head> 111 <body> 112 <div class="layui-col-md12"> 113 <div class="layui-card"> 114 <div class="layui-card-body "> 115 <blockquote class="layui-elem-quote">欢迎： 116 <span class="x-red" >admin</span> 117 <span id="time"></span> 118 </blockquote> 119 </div> 120 </div> 121 </div> 122 <div> 123 <div align="center" id='finddiv'> 124 <form action="" method="post" id="findbiaoaan"> 125 <input type="text" name="neednum"> 126 </form> 127 128 </div> 129 <div align="center" id="chaxun"><input class="button" type="button" id="findbtn" onclick="getreci()" value="查询"></div> 130 <div class="layui-col-sm6 layui-col-md4"> 131 <div class="layui-card"> 132 <div class="layui-card-header" >词云</div> 133 134 </div> 135 </div> 136 </div> 137 138 139 <div class="layui-col-sm6 layui-col-md2"> 140 <div class="layui-card"> 141 <div class="layui-card-header">热词TOP 142 </div> 143 <div class="layui-card-body " style="height:100%;"> 144 145 <div class="news_style"> 146 147 <div class="myscroll" id="FontScroll"> 148 <div id="tablediv"></div> 149 150 </div> 151 152 </div> 153 </div> 154 </div> 155 </div> 156 157 158 <script type="text/javascript"> 159 var alldata; 160 function getreci(){ 161 var dt; 162 var hzb=new Array(0); 163 var zzb=new Array(0); 164 165 $.ajax({ 166 url : "servlet?method=reci", 167 async : true, 168 type : "POST", 169 data : $('#findbiaoaan').serialize(), 170 171 dataType : "json", 172 173 success : function(data) { 174 alldata=data; 175 cleartable(); 176 recitable(); 177 dt = data; 178 var mydata = new Array(0); 179 for (var i = 0; i < dt.length; i++) { 180 var d = {}; 181 182 d["name"] = dt[i].name; 183 184 d["value"] = dt[i].value; 185 mydata.push(d); 186 hzb.push(dt[i].name); 187 zzb.push(dt[i].value); 188 } 189 //alert("mydata"+mydata); 190 var myChart = echarts.init(document.getElementById('main')); 191 //设置点击效果 192 193 194 Option1={ 195 title: { 196 text: '' 197 }, 198 legend: { 199 data:['设定温度','进水温度','出水温度','环境温度'] 200 }, 201 tooltip: { 202 }, 203 series: [{ 204 type : 'wordCloud', //类型为字符云 205 shape:'smooth', //平滑 206 gridSize : 8, //网格尺寸 207 size : ['50%','50%'], 208 //sizeRange : [ 50, 100 ], 209 rotationRange : [-45, 0, 45, 90], //旋转范围 210 textStyle : { 211 normal : { 212 fontFamily:'微软雅黑', 213 color: function() { 214 return 'rgb(' + 215 Math.round(Math.random() * 255) + 216 ', ' + Math.round(Math.random() * 255) + 217 ', ' + Math.round(Math.random() * 255) + ')' 218 } 219 }, 220 emphasis : { 221 shadowBlur : 5, //阴影距离 222 shadowColor : '#9EE734' //阴影颜色 223 } 224 }, 225 left: 'center', 226 top: 'center', 227 right: null, 228 bottom: null, 229 '100%', 230 height:'100%', 231 data:mydata 232 }] 233 }; 234 //myChart.setOption(Option1); 235 var zhudiv=echarts.init(document.getElementById('zhuzhuang')); 236 option = { 237 xAxis: { 238 type: 'category', 239 data: hzb 240 }, 241 yAxis: { 242 type: 'value' 243 }, 244 legend: { 245 data:['设定温度','进水温度','出水温度','环境温度'] 246 }, 247 tooltip:{ 248 trigger:'axis', 249 formatter:function(params,ticket, callback){ 250 return "热词:"+params[0].name+'</br>'+"数量:"+params[0].value; 251 252 } 253 }, 254 series: [{ 255 data: zzb, 256 itemStyle: { 257 normal: { 258 259 260 label: { 261 show: true, 262 position: 'top', 263 textStyle: { 264 color: 'black' 265 } 266 } 267 }, 268 emphasis:{ 269 color:'pink' 270 } 271 }, 272 type: 'bar', 273 showBackground: true, 274 backgroundStyle: { 275 color: 'rgba(180, 180, 180, 0.2)' 276 } 277 }] 278 }; 279 myChart.setOption(Option1); 280 option && zhudiv.setOption(option); 281 echarts.connect([myChart, zhudiv]); 282 setTimeout(function () { 283 myChart.on('mouseover',function(params){ 284 var dex=0; 285 //alert("hzb"+hzb); 286 for(i=0;i<hzb.length;i++){ 287 if(params.name==hzb[i]){ 288 dex=i; 289 break; 290 } 291 } 292 293 setTimeout(function(){ 294 $("#tabtr"+dex).css("background-color", "pink"); 295 296 },0); 297 //alert("点击了"+params.name); 298 }); 299 myChart.on('mouseout',function(params){ 300 var dex=0; 301 //alert("hzb"+hzb); 302 for(i=0;i<hzb.length;i++){ 303 if(params.name==hzb[i]){ 304 dex=i; 305 break; 306 } 307 } 308 309 $("#tabtr"+dex).css("background-color", "#FFFFFF"); 310 311 }); 312 },0); 313 314 315 316 }, 317 error : function() { 318 alert("请求失败"); 319 }, 320 }); 321 } 322 function recitable(){ 323 var bigdiv=document.getElementById("FontScroll"); 324 var str="<table align='center'>"; 325 var j=0; 326 for(i=0;i<alldata.length;i++){ 327 if(j==0)str=str+"<tr>"; 328 str=str+"<td class='iconfont' id='tabtr"+i+"'>"+(parseInt(i)+parseInt(1))+"."+alldata[i].name+"</td>"; 329 j++; 330 if(j==3){str=str+"</tr>";j=0} 331 332 } 333 str=str+"</table>"; 334 var div=document.createElement("div"); 335 div.id="tablediv"; 336 div.innerHTML = str; 337 bigdiv.appendChild(div); 338 } 339 function cleartable(){ 340 document.getElementById("tablediv").remove(); 341 } 342 function getTime(){ 343 var myDate = new Date(); 344 var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????) 345 var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月) 346 var myToday = myDate.getDate(); //获取当前日(1-31) 347 var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天) 348 var myHour = myDate.getHours(); //获取当前小时数(0-23) 349 var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59) 350 var mySecond = myDate.getSeconds(); //获取当前秒数(0-59) 351 var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; 352 var nowTime; 353 354 nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+' '+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+' '+week[myDay]+' '; 355 //console.log(nowTime); 356 $('#time').html(nowTime); 357 }; 358 function fillZero(str){ 359 var realNum; 360 if(str<10){ 361 realNum = '0'+str; 362 }else{ 363 realNum = str; 364 } 365 return realNum; 366 } 367 setInterval(getTime,1000); 368 369 370 371 372 </script> 373 <div id="main" align="center" style="height:262%;500px;"> 374 375 </div> 376 <div id="zhuzhuang" style="height:500%;80%"> </div> 377 </body> 378 </html>
dao.java部分代码：
1 public static Map<String,Integer> getrc() 2 { 3 int tnumi=0; 4 String sql="select * from xiangxi "; 5 Map<String, Integer>map= new HashMap<String, Integer>(); 6 Map<String, Integer>results= new LinkedHashMap<String, Integer>(); 7 Connection conn =Dbutil.getConnection(); 8 Statement st=null; 9 ResultSet rs=null; 10 try { 11 st=conn.createStatement(); 12 st.executeQuery(sql); 13 rs=st.executeQuery(sql); 14 while(rs.next()) 15 { 16 String keywords=rs.getString("title"); 17 keywords=keywords.substring(1, keywords.length()); 18 String[] split = keywords.split(" "); 19 for(int i=0;i<split.length;i++) 20 { 21 if(map.get(split[i])==null) 22 { 23 map.put(split[i],1); 24 } 25 else 26 { 27 map.replace(split[i], map.get(split[i])+1); 28 29 } 30 } 31 32 tnumi++; 33 } 34 } catch (SQLException e) { 35 // TODO Auto-generated catch block 36 e.printStackTrace(); 37 } 38 39 // System.out.println 40 Dbutil.close(rs, st, conn); 41 map.entrySet() 42 .stream() 43 .sorted((p1, p2) -> p2.getValue().compareTo(p1.getValue())) 44 .collect(Collectors.toList()) 45 .forEach(ele -> results.put(ele.getKey(), ele.getValue())); 46 return results; 47 }
界面展示：
