12月13
首先編寫了頂會(huì)熱詞統(tǒng)計(jì)的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)//彈窗函數(shù)，在拼接的字符串中調(diào)用
{
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 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獲取熱詞，與搜索內(nèi)容同步
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)//將單擊的熱詞添加到搜索欄的關(guān)鍵詞框
$("#button").click()//給熱詞添加單擊事件，觸發(fā)搜索按鈕單擊事件，刷新網(wǎng)頁
}
}
var datex=new Array()//x軸數(shù)據(jù)
var datey=new Array()//y軸數(shù)據(jù)
var date1=new Array()//詞圖云數(shù)據(jù)
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//熱詞數(shù)量對應(yīng)用戶輸入的數(shù)量，跳出each循環(huán)
})
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',
//網(wǎng)格尺寸,尺寸越大，字體之間的間隔越大
grideSize:2,
//字體的最大與最小字號
sizeRange:[12,35],
//字體旋轉(zhuǎn)的范圍
rotationRange:[45,90,135,-90],
//詞云形狀 circle:圓形,pentagon:五邊形
//cardioid:蘋果形或心形,star:星形,diamond:鉆石,
//triangle-forward:三角形,triangle:三角形,smooth:平滑
shape:'pentagon',
textStyle:{
normal:{
//字體隨機(jī)顏色
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, //拖動(dòng)滾動(dòng)條時(shí)是否動(dòng)態(tài)的更新圖表數(shù)據(jù)
height:15,//滾動(dòng)條高度
start:0,//滾動(dòng)條開始位置（共100等份）
end:20//結(jié)束位置（共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())//默認(rèn)顯示10個(gè)熱詞的信息
$("#word_num").on("blur",function(){
getkey($("#word_num").val())
})//給熱詞數(shù)量 文本框添加失去焦點(diǎn)事件
$("#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 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">
<div id="main">
</div>
<div id="main2"></div>
<center>
<h1>論文檢索：</h1><br>
論文id號：<input type="text" name="id" id="find_id" value="" placeholder="選填"/><br>
論文標(biāo)題：<input type="text" name="id" id="find_name" value="" placeholder="選填"/><br>
論文作者及出處：<input type="text" name="id" id="find_writer" value="" placeholder="選填"/><br>
論文發(fā)布時(shí)間：<input type="text" name="id" id="find_time" value="" placeholder="選填"/><br>
論文關(guān)鍵詞搜索：<input type="text" name="id" id="find_keywords" value="" placeholder="選填"/><br>
<button id="button"> 搜索</button><br>
詞圖云熱詞數(shù)目：<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>
其運(yùn)行樣式截圖
總結(jié)
- 上一篇： SAP UI5 Mock server，
- 下一篇： win10 VMware 虚拟机 实现桥