顶会热词3 - 戈瑾

热词分析功能

热词分析功能可以根据输入的想要的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               width: 100%;
 29               height: 1500px;
 30               
 31               border:1px solid #ddd;
 32               float:center;
 33           }
 34          #FontScroll{
 35                 width: 100%;
 36                 height: 245px;
 37                 overflow: hidden;
 38             }
 39             #FontScroll ul li{
 40                 height: 32px;
 41                 width: 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-width: auto !important;
 52             }
 53             
 54   
 55 .container,.cloud{
 56     display: inline-block;
 57 }
 58 .container{
 59     width: 100%;
 60     height: 600px;
 61     overflow: auto;
 62     text-align: left;
 63 }
 64 .cloud{
 65     background-color: #000;
 66     width: 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     width: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                                  width:'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+"'>&#xe622;"+(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)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
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%;width:500px;">
374   
375                       </div>
376 <div id="zhuzhuang" style="height:500%;width: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     }

界面展示：

posted on 2021-06-12 01:34 戈瑾阅读(66) 评论(0) 收藏举报

刷新页面返回顶部