词云（三）：选择图形+图片，切换绘制词云

    偶然间发现，echarts中的wordCloud类型可以直接绘制图形，直接在option中的series传入shape值即可。不过前提还是需要echarts相应的插件。

插件准备：（1）jquery-1.8.3.min.js

                 （2）echarts.min.js

                 （3）echarts-wordcloud.min.js

    下面就是传入shape值的代码，目前我所尝试的可以绘制出相应图形的有：圆形、五角星、正方形、三角形。

//选择图片
    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};
//绘制词云
    function add(arr){
	var myChart = echarts.init(document.getElementById('main'));
	var arr = arr;
	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 myChart = echarts.init(document.getElementById('main'));
	var maskImage = new Image();
	var option = {
	    tooltip: {
	        show: false
	    },
	    series: [{
	        type: 'wordCloud',
	        gridSize: 1,
	        sizeRange: [6, 20],
	        rotationRange: [0, 180],
	        rotationStep: 90,
	        shape:'circle',
	        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
	    }]
        }
	myChart.setOption(option);			 
    }	

    基于之前可以选择图片的效果，我想要将这些个图形可以直接选择然后绘制，说到选择，当然是select啦。只需要小小的改动就可以啦。把shape的值换成变量，传入。

    既然图形和图片都是可以选择绘制的，为啥不写在一起试试呢？

（1）html代码

<div class="main">
    <div id="main" style="width:600px;height:600px;"></div>
    <div id="chooseword"></div>
    <div id="shapeselect">
	请选择绘制图形
	<select>
	    <option value="circle">圆形</option>
	    <option value="pentagon">五角星</option>
	    <option value="square">正方形</option>
	    <option value="triangle">三角形</option>
	</select>
    </div>
</div>

（2）方便实现效果的css

#chooseword{
    position: absolute;
    top:386px;
    left:500px;
    color:yellow;
    font-size:28px;
}
#choose{
    position: absolute;
    width:540px;
    text-align: center;
    font-size:30px; 
    top:0;
    left:0;
    display: none;
    color:#fff;
    font-weight: bold;
}
.main{
    position: relative;
}
#main{
    margin-right:40px;
    float:left;
}
#lee{
    display: none;
}
.imgbox{
    margin-top:60px;
}

（3）jQuery代码 

$(function(){	
    //选择图片
    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};
    $('.imgbox').on('click','img',function(e){
	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;
	};
	img.src = $(this).attr('src');
	$('#lee').html(img);
	setTimeout(add('img',arr),100);
    });		
    //选择图形
    $('#shapeselect').on('change','select',function(){
	setTimeout(add('shape',arr),100);
    });
    //绘制词云
    function add(imgor,arr){
	var myChart = echarts.init(document.getElementById('main'));
	var arr = arr;
	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 myChart = echarts.init(document.getElementById('main'));
	//每次画之前需要清除画布
	myChart.clear();
	var maskImage = new Image();			   
	if(imgor=='img'){
	    var imgurl = $('#lee').find('img').attr('src');
	    var option = {
		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.onload = function() {
		myChart.setOption(option);
	    };
	    maskImage.src = imgurl;
	}else{	
	    var shape = $('#shapeselect').find('select').val();
	    var option = {
		tooltip: {
		show: false
	    },
	    series: [{
		type: 'wordCloud',
		gridSize: 1,
		sizeRange: [6, 20],
		rotationRange: [0, 180],
		rotationStep: 90,
		shape:shape,
		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
	    }]
	}
	myChart.setOption(option);
    }
}	
var myChart = echarts.init(document.getElementById('main'));
myChart.on('mouseover', function (params) { 
    $('#chooseword').html(params.name);
});
});

    在这个过程中出现过一个问题，在选择完图片之后再选择图形就失效了..还能说什么好，这是看到图片之后就不再选择图形了吗，哎呀呀，这是病，得治啊。好吧，我就发发善心，给你治治吧~既然你忘不掉，那我帮你好啦。

这样就算是治好啦，哈哈，机智如我。

     至此为止，echarts中wordCloud相关已经就此结束啦~