一，直接上效果图
词云效果图如下所示：
点击词云后效果如下所示;
点击返回会回到词云：
直接上代码，如下所示：
// 关键词切换 getScenicgjc() function getScenicgjc(ct){
$("#cht1").show();
$("#cht2s").empty();
$("#cht2").hide();
$.ajax({
url : weburl + 'travelapi/netComment/getKeywordsInRecent30Days?classification='+ct,
async : true,
dataType : 'json',
headers: heder,
cache:false,
data:searchdata,
success : function(resp, textStatus) {
var jsonObj = resp;
checkusr(jsonObj);
var s = eval('('+jsonObj.msg+')');
var d1 = [];
console.log(s)
for(var i = 0; i < s.length; i++) {
d1[i] = {"name":s[i].KindName,"value":s[i].Count};
}
var myCharts = echarts.init(document.getElementById('cht1'));
//温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容 iconfont上面的图标可以
var maskImage = new Image();
maskImage.src = wordCloud.image
maskImage.onload = function(){
myCharts.setOption( {
tooltip: {
show: true,
textStyle:{
fontSize:fonts12
}
},
grid:{top:-30,bottom:-30},
series: [{
type: 'wordCloud',
gridSize: 1,
sizeRange: [38, 132],
rotationRange: [-45, 0, 45, 90],
maskImage: maskImage,
textStyle: {
normal: {
color: function() {
return 'rgb(' +
Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) + ')'
}
}
},
left: 'center',
top: 'center',
right: null,
bottom: null,
data: wordCloud.data
}]
})
}
wordCloud.data = d1;
console.log(d1,666);
// getScenicgjc()
myCharts.on('click',function(params){
console.log(params.name,9999)
$.ajax({
url : weburl + 'travelapi/netComment/getNumberOfComments',
async : true,
cache:false,
dataType : 'json',
headers: heder,
data:{'classification':ct,
'impression':params.name
},
success : function(resp, textStatus) {
//console.log(resp);
var jsonObj = resp;
checkusr(jsonObj);
$("#cht1").hide();
$("#cht2s").empty();
$("#cht2").show();
s = eval('('+jsonObj.msg+')');
var d1 = [] ,d2 = [],d3 = [],d4 = [];
var cap = "";
for(var i = 0; i < s.length; i++) {
d1[i] = s[i].HIS_impression;
d2[i] = s[i].HIS_HTName;
d3[i] = s[i].sum;
$("#cht2s").append('<div class="data-content"><span><a title="'+ d2[i]+'">'+ cap + d2[i]+'</a></span><span>'+ d1[i]+'</span><span>'+ d3[i]+'</span></div>');
}
},
error : function(){
}
});
})
},
error : function(){
}
});
}
function goback(){
$("#cht1").show();
$("#cht2s").empty();
$("#cht2").hide();
}
其中包括词云渲染，myCharts.setOption，词云点击事件myCharts.on('click',function(params){，有啥不懂的可以留言，如果对你有帮助的话，请点个赞吧
