首先编写了顶会热词统计的html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
font-size: 60;
position: absolute;
top: 400px;
}
.name{
600px;
}
#main{
400px;
height: 300px;
position: absolute;
left: 60px;
}
#main2{
400px;
height: 300px;
position: absolute;
right: 60px;
}
a{ text-decoration:none}
</style>
</head>
<script src="js/echarts.js"></script>
<script src="js/echarts-wordcloud.js"></script>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function alert_m(str)//弹窗函数，在拼接的字符串中调用
{
alert(str)
}
function setview(){//显示论文列表
$.ajax({
async:false,//同步ajax
url:"getallpaper",
success:function(resp){//绘制表格
$("#table").text("")
$("#table").append("<tr><th class='th'>id</th><th >name</th><th class='th'>writers</th><th class='th'>time</th><th class='th'>Abstract</th><th class='th'>keywords</th></tr>")
$.each(resp,function(i,a){
$("#table").append("<tr><th class'th'> "+a.id+"</th><th><a href='https://openaccess.thecvf.com/"+a.href+"' target='_blank'>"+a.name+"</a></th><th class'th'>"+a.writer+
"</th</tr>"+"</th><th class'th'>"+a.time+"</th</tr>"+"</th><th class'th'>"+
"<button id='button' onclick='alert_m(\""+a.abstract+"\")'> 概要</button><br>"+"</th><th class'th'>"+a.keywords)
})
},
dataType:"json"
})
}
function getkey(T)//显示热词的词图云和柱状图
{
//热词的显示和搜索框同步
var id=$("#find_id").val()
var name=$("#find_name").val()
var writer=$("#find_writer").val()
var time=$("#find_time").val()
var keywords=$("#find_keywords").val()
$.ajax({//ajax获取热词，与搜索内容同步
async:false,
url:"wordcloud",
data:{"name":name,"id":id,"writer":writer,"time":time,"keywords":keywords},
success:function(resp){
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
$("#find_keywords").attr("value",param.name)//将单击的热词添加到搜索栏的关键词框
$("#button").click()//给热词添加单击事件，触发搜索按钮单击事件，刷新网页
}
}
var datex=new Array()//x轴数据
var datey=new Array()//y轴数据
var date1=new Array()//词图云数据
var Temp=0;
$.each(resp,function(i,a){
datex[Temp]=a.name
datey[Temp]=a.value
date1[Temp]=a
Temp++;
if(Temp==T) return false//热词数量对应用户输入的数量，跳出each循环
})
var Mychart = echarts.init(document.getElementById("main"));
var Mychart2 = echarts.init(document.getElementById("main2"));
var option = {//词图云option
title:{
text:'词云',
textStyle:{
color:'#ffffff'
}
},
series:[{
type:'wordCloud',
//网格尺寸,尺寸越大，字体之间的间隔越大
grideSize:2,
//字体的最大与最小字号
sizeRange:[12,35],
//字体旋转的范围
rotationRange:[45,90,135,-90],
//词云形状 circle:圆形,pentagon:五边形
//cardioid:苹果形或心形,star:星形,diamond:钻石,
//triangle-forward:三角形,triangle:三角形,smooth:平滑
shape:'pentagon',
textStyle:{
normal:{
//字体随机颜色
color:function(){
return 'rgb('+[
Math.round(Math.random()*255),
Math.round(Math.random()*255),
Math.round(Math.random()*255)
].join(',')+')';
}
},
emphasis:{
//阴影距离
shadowBlur:1,
//阴影颜色
shadowColor:'#aaff00'
}
},
data:date1
}]
};
var option2 = {//柱状图option
dataZoom:{
realtime:true, //拖动滚动条时是否动态的更新图表数据
height:15,//滚动条高度
start:0,//滚动条开始位置（共100等份）
end:20//结束位置（共100等份）
},
xAxis: {
type: 'category',
data: datex
},
yAxis: {
type: 'value'
},
series: [{
howAllSymbol: true,
data:datey,
type: 'bar'
}]
};
Mychart.setOption(option);
Mychart2.setOption(option2);
var ecConfig = echarts.config;//词图单击事件
Mychart.on('click', eConsole);
},
dataType:"json"
})
}
$(document).ready(function(){
setview()
getkey($("#word_num").val())//默认显示10个热词的信息
$("#word_num").on("blur",function(){
getkey($("#word_num").val())
})//给热词数量 文本框添加失去焦点事件
$("#button").on("click",function(){
getkey($("#word_num").val())
var id=$("#find_id").val()
var name=$("#find_name").val()
var writer=$("#find_writer").val()
var time=$("#find_time").val()
var keywords=$("#find_keywords").val()
$.ajax({//论文搜索
async:false,
data:{"name":name,"id":id,"writer":writer,"time":time,"keywords":keywords},
url:"findpaper",
success:function(resp){
$("#table").text("")
$("#table").append("<tr><th class='th'>id</th><th '>name</th><th class='th'>writers</th><th class='th'>time</th><th class='th'>Abstract</th><th class='th'>keywords</th></tr>")
$.each(resp,function(i,a){
$("#table").append("<tr><th class'th'>"+a.id+"</th><th><a href='https://openaccess.thecvf.com/"+a.href+"' target='_blank'>"+a.name+"</a></th><th class'th'>"+a.writer+
"</th</tr>"+"</th><th class'th'>"+a.time+"</th</tr>"+"</th><th class'th'>"+
"<button id='button' onclick='alert_m(\""+a.abstract+"\")'> 概要</button><br>"+"</th><th class'th'>"+a.keywords)
})
},
dataType:"json"
})
})
})
</script>
<body background="js/p.jpg" style="background-repeat:no-repeat;background-attachment:fixed;background-size:100%">
<div id="main">
</div>
<div id="main2"></div>
<center>
<h1>论文检索：</h1><br>
论文id号：<input type="text" name="id" id="find_id" value="" placeholder="选填"/><br>
论文标题：<input type="text" name="id" id="find_name" value="" placeholder="选填"/><br>
论文作者及出处：<input type="text" name="id" id="find_writer" value="" placeholder="选填"/><br>
论文发布时间：<input type="text" name="id" id="find_time" value="" placeholder="选填"/><br>
论文关键词搜索：<input type="text" name="id" id="find_keywords" value="" placeholder="选填"/><br>
<button id="button"> 搜索</button><br>
词图云热词数目：<input type="text" name="" id="word_num" value="10" /><br>
<div id="div">
<table border="1px" cellspacing="1px" cellpadding="1px" id="table">
</table>
</div>
</center>
</body>
</html>
其运行样式截图
