效果图如下：
至于词云形成的什么图形，应该能看出来吧，哈哈。言归正传，选择的图片最好是黑白两色的，这样可以更好的描绘图形，不然五颜六色的可能绘制出来的东东会让你哭笑不得。
以下是实现代码
插件准备：（1）jquery-1.8.3.min.js
（2）echarts.min.js
（3）echarts-wordcloud.min.js
图片准备： 两色图片即可
（1）html代码
<div class="main">
<div id="main" style="width:600px;height:540px;"></div>
<div id="chooseword"></div>
</div>
<div id="lee"></div>
<div class="imgbox">
<img src="img/cloud06.jpg" alt="" />
<img src="img/cloud07.jpg" alt="" />
<img src="img/cloud08.jpg" alt="" />
</div> （2）方便实现效果的css
#chooseword{
position: absolute;
bottom: 20px;
left:500px;
color:yellow;
font-size:28px;
}
#choose{
position: absolute;
width:540px;
height:270px;
text-align: center;
font-size:30px;
top:0;
left:0;
display: none;
color:#fff;
font-weight: bold;
}
.main{
position: relative;
}
#lee{
display: none;
}（3）jQuery代码
<script src="jquery-1.8.3.min.js"></script>
<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>
<script>
$(function(){
//选择图片
$('.imgbox').on('click','img',function(e){
var myurl;
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL();
canvas = null;
myurl = dataURL;
return dataURL;
};
img.src = $(this).attr('src');
$('#lee').html(img);
setTimeout(add,500);
});
//绘制词云
function add(){
var myChart = echarts.init(document.getElementById('main'));
var arr = {"圣诞树1":90,"圣诞树2":80,"圣诞树3":20,"圣诞树4":40,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50,"圣诞树1":90,"圣诞树2":80,"圣诞树3":20,"圣诞树4":40,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50};
var chooseurl = $('#lee').find('img').attr('src');
var data = [];
for (var i = 0; i < arr.length; ++i) {
data.push({
name: arr[i],
value: (presents.length - i) * 0.8
});
}
for(var k in arr){
var cnt = Math.floor(Math.random() * 10);
for (var j = 0; j < cnt; ++j) {
data.push({
name: k,
value: arr[k]*Math.random()
});
}
}
var maskImage = new Image();
maskImage.onload = function() {
myChart.setOption({
tooltip: {
show: false
},
series: [{
type: 'wordCloud',
gridSize: 1,
sizeRange: [6, 20],
rotationRange: [0, 180],
rotationStep: 90,
maskImage: maskImage,
textStyle: {
normal: {
color: function(v) {
if (v.value > 190) {
return 'rgb(110, 206, 7)';
} else if (v.value > 80) {
return 'rgb(7, 49, 206)';
} else if (v.value > 70) {
return 'rgb(105, 7, 206)';
} else if (v.value > 60) {
return 'rgb(185, 45, 225)';
} else if (v.value > 50) {
return 'rgb(247, 65, 193)';
} else if (v.value > 40) {
return 'rgb(223, 31, 126)';
} else if (v.value > 30) {
return 'rgb(66, 152, 177)';
} else if (v.value > 20) {
return 'rgb(229, 208, 66)';
} else if (v.value > 10) {
return 'rgb(189, 117, 82)';
} else {
return 'rgb(20, 186, 167)';
}
}
},
},
width:540,
top: 10,
data: data
}]
});
};
maskImage.src = chooseurl;
}
var myChart = echarts.init(document.getElementById('main'));
myChart.on('mouseover', function (params) {
$('#chooseword').html(params.name);
});
});
</script>