今天整理了一下之前做的个人作业2，将之前完整的一部分重新梳理了一遍，
展示热词云页面：
<!DOCTYPE html>
<html>
<head>
<title>顶会热词</title>
<meta charset="utf-8">
<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/echarts.js"></script>
<script src='js/worldcloud.js'></script>
<script src="js/bootstrap.js"></script>
<style>
body{
background:#F5F5F5;
}
#main{
50%;
height: 600px;
margin: 0;
float:right;
background: black;
}
#show{
overflow-x: auto;
overflow-y: auto;
50%;
height: 600px;
float:left;
margin-top:100dp;
padding-top:100dp;
background: yellow;
}
#lunwen{
overflow-x: auto;
overflow-y: auto;
100%;
height: 600px;
float:left;
margin-top:100dp;
padding-top:100dp;
background:#F5F5F5;
}
</style>
<script>
$(function(){
echartsCloud();
});
//点击事件
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
var word=param.name;
var htmltext="<table class='table table-striped' style='text-align:center'><caption style='text-align:center'>相关论文题目与链接</caption>";
$.post(
'Servlet',
{'word':word},
function(result)
{
json=JSON.parse(result);
for(i=0;i<json.length;i++)
{
htmltext+="<tr><td><a target='_blank' href='"+json[i].link+"'>"+json[i].title+"</a></td></tr>";
}
htmltext+="</table>"
$("#lunwen").html(htmltext);
}
)
}
}
function echartsCloud(){
$.ajax({
url:"getmax",
type:"POST",
dataType:"JSON",
async:true,
success:function(data)
{
var mydata=data;
var myChart = echarts.init(document.getElementById('show'));
//设置点击效果
var ecConfig = echarts.config;
myChart.on('click', eConsole);
myChart.setOption({
title: {
text: '最新热词统计'
},
tooltip: {},
series: [{
type : 'wordCloud', //类型为字符云
shape:'smooth', //平滑
gridSize : 8, //网格尺寸
size : ['50%','50%'],
//sizeRange : [ 50, 100 ],
rotationRange : [-45, 0, 45, 90], //旋转范围
textStyle : {
normal : {
fontFamily:'微软雅黑',
color: function() {
return 'rgb(' +
Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) + ')'
}
},
emphasis : {
shadowBlur : 5, //阴影距离
shadowColor : '#333' //阴影颜色
}
},
left: 'center',
top: 'center',
right: null,
bottom: null,
'100%',
height:'100%',
data:mydata
}]
});
var myChart2 = echarts.init(document.getElementById('main'));
var option = {
title: {
text:'热词柱状'
},
legend: {
data:['数据分析']
},
xAxis: {
type: 'category',
axisLabel:{
interval:0,
rotate:-30
},
data:['Image','Learning','Deep','Network','Segmentation','Detection','3D','Video','Neural','Networks']
},
yAxis: {},
series: [{
name: '数据分析',
type: 'bar',
data:mydata
}]
};
myChart2.setOption(option);
},
error : function() {
alert("请求失败");
}
});
}
</script>
</head>
<body>
<div id='show'></div>
<div id="main"></div>
<div id='lunwen'></div>
</body>
</html>
在此页面进行热词云的展示。