对于第二阶段，老师的要求是实现词云的显示，从网上搜索相关内容发现，这一图形也是echarts的工具，但是官方没有使用样例了，因此要实现这个就要再网上找其他的教程。最终找到了，
对于词云的实现也要加载相关的js文件，然后我找到了这些js文件，将其放在文件的js文件下，然后再查询信息的时候也是使用Ajax，最终实现了词云的显示，
词云的前端代码为：
var dt;
var hzb=new Array(0);
var zzb=new Array(0);
$.ajax({
url : "servlet?method=reci",
async : true,
type : "POST",
data : {
},
dataType : "json",
success : function(data) {
dt = data;
var mydata = new Array(0);
for (var i = 0; i < dt.length; i++) {
var d = {};
d["name"] = dt[i].name;
d["value"] = dt[i].value;
mydata.push(d);
hzb.push(dt[i].name);
zzb.push(dt[i].value);
}
//alert("mydata"+mydata);
var myChart = echarts3.init(document.getElementById('main'));
//设置点击效果
myChart.setOption({
title: {
text: ''
},
tooltip: {},
series: [{
type : 'wordCloud', //类型为字符云
shape:'smooth', //平滑
gridSize : 8, //网格尺寸
size : ['50%','50%'],
//sizeRange : [ 50, 100 ],
rotationRange : [-45, 0, 45, 90,60,16], //旋转范围
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 zhudiv=echarts3.init(document.getElementById('zhuzhuang'));
option = {
xAxis: {
type: 'category',
data: hzb
},
yAxis: {
type: 'value'
},
series: [{
data: zzb,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black'
}
}
},
},
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};
option && zhudiv.setOption(option);
},
error : function() {
alert("请求失败");
},
});
使用这部分代码即可实现词云的显示。