index.jsp
<%@ page pageEncoding="utf-8"%>
<%@ page import="com.example.myLab04.book.bean.BookInfo" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.example.myLab04.tool.pager" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>顶会热词查询</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: aqua">
<h1>顶会热词查询</h1>
<%
@SuppressWarnings("unchecked")
BookInfo bi2 = (BookInfo)request.getAttribute("bi");
%>
<img class="9.jsp"/>
<form action="index.do" method="post" style="text-align: center;">
<select name="year" >
<option value="1" selected>今年</option>
<option value="2">两年内</option>
<option value="3">三年内</option>
</select>
<%
String id2="";
if(bi2.getId()!=0){
id2=String.valueOf(bi2.getId());
}
%>
编号:<input type="text" name="sid" style="text-align: center;" value="<%=id2%>">
题目:<input type="text" name="stitle" style="text-align: center;" value="${bi.title}">
关键词:<input type="text" name="skeywords" style="text-align: center;" value="${bi.keywords}">
<input type="submit" value="搜索" style="text-align: center;">
</form>
<a href="title.html" style="font-size:20px;float:left">转到主页</a>
<a href="addview.do" style="font-size:20px;">添加论文信息</a>
<p />
<table style="width: 70%">
<tr>
<th>编号</th>
<th>题目</th>
<th>作者</th>
<th>详情</th>
</tr>
<%
@SuppressWarnings("unchecked")
pager<BookInfo> list = (pager<BookInfo>) request.getAttribute("list");
for (BookInfo bi : list.getData()) {
int id = bi.getId();
%>
<tr>
<td style="text-align:center;"width="40px";><%=bi.getId()%></td>
<td style="word-wrap:break-word;word-break:break-all;" width="100px";><%=bi.getTitle()%></td>
<td style="word-wrap:break-word;word-break:break-all;" width="100px";><%=bi.getAuthors()%></td>
<td style="word-wrap:break-word;word-break:break-all;text-align:center;" width="60px" ><a href="edit.do?id=<%=id%>">点击查看详情</a><br><a
href="delete.do?id=<%=id%>">删除</a></td></tr>
</tr>
<%
}
%>
</table>
<div style="font-size:17px;">
共<%=list.getTotalCount()%>条记录
<%=list.getCurrentPage()%>/<%=list.getTotalPage()%>
<form action="index.do" style="white-space: nowrap;font-size:17px;display: inline" method="post">
<input type="hidden" name="currentPage" value="1">
<input type="submit" style="font-size:17px;" value="首页"/>
</form>
<form action="index.do" method="post" style="white-space: nowrap;font-size:17px;display: inline">
<input type="hidden" name="currentPage" value="<%=list.getCurrentPage()-1%>">
<input type="submit" value="上一页" style="font-size:17px;"/>
</form>
<form action="index.do" method="post" style="white-space: nowrap;font-size:17px;display: inline">
<input type="hidden" name="currentPage" value="<%=list.getCurrentPage()+1%>">
<input type="submit" value="下一页" style="font-size:17px;"/>
</form>
<form action="index.do" method="post" style="white-space: nowrap;font-size:17px;display: inline">
<input type="hidden" name="currentPage" value="<%=list.getTotalPage()%>">
<input type="submit" value="尾页" style="font-size:17px;"/>
</form>
跳转至:
<form action="index.do" method="post" style="white-space: nowrap;font-size:17px;display: inline">
<input type="number" name="currentPage" style="width:40px;font-size:17px;" min="1">页
<input type="submit" value="Go" style="font-size:17px;"/>
</form>
</div>
<br />
<hr />
<div style="text-align: center; width: 100%; font-size: 12px; color: #333;">
©版权所有:石家庄铁道大学信息科学与技术学院
</div>
</body>
</html>
title.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=drive-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="login.css"> <!-- font-awesome 图标字体 http://www.fontawesome.com.cn/faicons/#web-application --> <link href="css/titlec.css" media="screen" rel="stylesheet" type="text/css"> <title>顶会热词</title> </head> <body style="background: #AAEEFF"> <div id="login-box"> <h1>顶会热词</h1> <button id="mybtn" onclick="window.location.href = 'index.do'">查询</button> <br> <button onclick="window.location.href = 'wordCloud.do'">分析</button> </div> </body> </html>wordCloud.jsp
<%@ page import="com.example.myLab04.book.bean.BookInfo" %>
<%@ page import="com.example.myLab04.tool.pager" %>
<%@ page import="java.awt.image.Kernel" %>
<%@ page import="com.example.myLab04.book.bean.Kinfo" %>
<%@ page import="java.util.ArrayList" %><%--
Created by IntelliJ IDEA.
User: 23961
Date: 2021/6/11
Time: 22:53
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta charset="utf-8">
<script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
<!-- <script src="../../echarts/dist/echarts.js"></script> -->
<script src='./js/echarts-wordcloud.js'></script>
</head>
<body style="background: aqua">
<style>
html, body {
background:linear-gradient(to right,#AAEEFF 0%,#AAEEFF 100%);
background-size: 100% auto;
width: 100%;
height: 100%;
text-align: center;
margin: 0;
}
#main{
background:linear-gradient(to right,#AAEEFF 0%,#AAEEFF 100%);
background-size: 100% auto;
width: 100%;
height: 70%;
margin: 0;
}
.chart{
width: 100%;
height: 50%;
}
</style>
<h1 style="text-align: center;">顶会热词分析系统</h1>
<a href="title.html" style="font-size:20px;text-align:center;">转到主页</a>
<form action="wordCloud.do" method="post" style="text-align: center;font-size:20px;">
数量:<input type="text" name="snum" style="text-align: center;font-size:20px;">
<input type="submit" value="搜索" style="text-align: center;font-size:20px;">
</form>
<div id='main'></div>
<script>
var chart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
series: [ {
type: 'wordCloud',
gridSize: 3,
sizeRange: [12, 100],
rotationRange: [-180, 180],
shape: 'pentagon',
width: 600,
height: 200,
drawOutOfBound: true,
textStyle: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [
/*{
name: 'Sam S Club',
value: 10000,
textStyle: {
color: 'black'
},
emphasis: {
textStyle: {
color: 'red'
}
}
},*/
<c:forEach items="${list}" var="y">
{name:'${y.key2}',value:${y.num},},
</c:forEach>
]
} ]
};
chart.setOption(option);
window.onresize = chart.resize;
</script>
<sectionc class="mainbox">
<div class="column">
<div class="panel bar">
<div class="chart">
<script>
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2. 指定配置项和数据
var arr = new Array();
var index = 0;
<c:forEach items="${list}" var="yi">
arr[index++] = ${yi.num};
</c:forEach>
var option = {
color: ["#2f89cf"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
}
},
// 修改图表的大小
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: [
{
type: "category",
data: [
<c:forEach items="${list}" var="y">
["${y.key2}"],
</c:forEach>
],
axisTick: {
alignWithLabel: true
},
// 修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6) ",
fontSize: "12"
},
// 不显示x坐标轴的样式
axisLine: {
show: false
}
}
],
yAxis: [
{
type: "value",
// 修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6) ",
fontSize: 12
},
// y轴的线条改为了 2像素
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 2
}
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
name: "直接访问",
type: "bar",
barWidth: "35%",
data: arr,
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5
}
}
]
};
myChart.setOption(option);
</script>
</div>
<div class="panel-footer"></div>
</div>
</body>
</html>
titlec.css
body{ background:linear-gradient(to right,#FFFFDD 0%,#FFFFAA 100%); /*background-repeat: no-repeat;*/ background-size: 100% auto; } #login-box{ width: 30%; height: auto; margin: 0 auto; margin-top: 15%; text-align: center; background:#B3E9F7; padding: 20px 50px; } #login-box h1{ color: #fff; } #login-box .form .item input{ margin-top: 15px; } #login-box .form i{ font-size: 18px; color: #fff; } #login-box .form .item input { width: 180px; font-size: 18px; border: 0; border-bottom: 2px solid#fff; padding: 5px 10px; background:#B3E9F7; color: red; } #login-box button{ margin-top: 15px; width: 180px; height: 30px; font-size: 20px; font-weight: 700; color: #B3E9F7; background:linear-gradient(to right,#FFFF00 0%,#00FF66 100%); border: 0; border-radius: 15px; } style.css body { background:linear-gradient(to right,#30cfd0 0%,#330867 100%); background-size: 100% auto; text-align: center; }table { /*font-size:20px;*/ width:70%; border: 1px solid #696969; border-collapse: collapse; margin:0 auto; } th { border: 1px solid #696969; background-color: #FFF8DC; } td { /*text-align: left;*/ border: 1px solid #696969; height: 50px; background-color: #E0FFFF; } td.ltd { text-align: left; } input { }