<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8");%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <base href="<%=basePath%>"> <!--// echarts CDN--> <!--//<script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>--> <script src="${pageContext.request.contextPath}/plug-ins/js/echarts.js"></script> <script src="${pageContext.request.contextPath}/plug-ins/js/echarts.min.js"></script> <!--// 下载wordcloud.js文件 // https://github.com/ecomfe/echarts-wordcloud--> <script src="${pageContext.request.contextPath}/plug-ins/js/echarts-wordcloud.js"></script> <script src="${pageContext.request.contextPath}/plug-ins/js/jquery-1.10.2.min.js"></script> </head> <body> <style> table,td,th { border:1px solid black; } table { 100%; } th { height:50px; } html, body{ 100%; height: 100%; margin: 0; } #main{ 600px; height: 500px; background: rgba(70, 120, 200, 0.2) } .box{ 600px; height: 500px; background: rgba(70, 120, 200, 0.2) } p.pos_fixed { position:fixed; top:30px; right:5px; } .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; } .button4 { background-color: white; color: black; border: 2px solid #e7e7e7; } .button4:hover {background-color: #e7e7e7;} input[type=text] { 160px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('https://static.runoob.com/images/mix/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { 70%; } </style> <div id='select'> <p>多条件查询（如果没有可不查）:</p> <script> $(document).ready(function(){ $("#hide1").click(function(event){ $("#keyword2,#hide2,#show2").hide(); event.preventDefault(); }); $("#show1").click(function(event){ $("#keyword2,#hide2,#show2").show(); event.preventDefault(); }); $("#hide2").click(function(event){ $("#keyword3").hide(); event.preventDefault(); }); $("#show2").click(function(event){ $("#keyword3").show(); event.preventDefault(); }); }); </script> <form action="ClickServlet"method="post"> <input type="text" name="name" placeholder="输入关键词"> <button id="show1">+</button> <button id="hide1">-</button></p> <input type="text" id="keyword2"name="keyword2" placeholder="输入作者"hidden> <button id="show2"hidden>+</button> <button id="hide2"hidden>-</button></p> <input type="text"id="keyword3" name="keyword3" placeholder="输入标题"hidden></p> <button class="button button4"onsubmit="ClickServlet">查询</button> </form> </div> <div id='main'> <script> var chart1 = echarts.init(document.getElementById('main')); var postURL = "/lunwen/ShowServlet"; var mydata = new Array(); $.ajaxSettings.async = false; $.post(postURL, {}, function(rs) { var dataList = JSON.parse(rs); for (var i = 0; i < dataList.length; i++) { var d = {}; d['name'] = dataList[i].name; d['value'] = dataList[i].value; mydata.push(d); } }); $.ajaxSettings.async = true; var option = { tooltip : {}, series : [ { type : 'wordCloud', gridSize : 2, sizeRange : [ 10, 30 ], rotationRange : [ -90, 90 ], shape : 'pentagon', width : 800, height : 600, drawOutOfBound : false, textStyle : { normal : { color : function() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ] .join(',') + ')'; } }, emphasis : { shadowBlur : 10, shadowColor : '#333' } }, data : mydata } ] }; chart1.setOption(option); chart.on('click', function(params) { var url = "ClickServlet?name=" + params.name; window.location.href = url; }); </script> </div> <div> <table class="table table-hover"> <tr> <th>论文名称</th> <th>关键词</th> <th>来源</th> <th> </th> </tr> <tbody> <c:forEach items="${list2}" var="data" varStatus="vs"> <tr> <td><a href="${data.link}">${data.title}</a></td> <td>${data.keyword}</td> <td>cvpr</td> <td><a href="DeleteServlet?name=${data.keyword}">delete </a></td> </tr> </c:forEach> </tbody> </table> </div> </body> </html>