基于Echarts的自定义图案动态词云

先放效果图，默认显示China Daily首字母CD，鼠标悬浮在某个热词上时会改变样式并显示该词的热度值，点击某个热词跳出该热词的具体详情：

引用

echarts 3 是没有词云的，所以需要单独引用echarts-wordcloud.js才能正常使用词云。

   <script src="echarts.min.js"></script>
   <script src="echarts-wordcloud.js"></script>
   <script src="jquery.min.js"></script>

词云实现

词云实现的具体代码如下：

          var myChart = echarts.init(document.getElementById('main'));

          var maskImage = new Image();

          var logoUrl = "cdlogo.jpg";

          var option = {
	            	title: {
		            	text: 'China Daily热词'
		        	},
		        	//自定义提示工具，加了一张火的图片
	          	tooltip : {
	          		formatter:"<img style='width:20px;height:20px;' src='hot.png'/> 热度:{c}",	          	
	          		backgroundColor:'rgba(255,255,255,0)',
	          		textStyle:{
	          			fontWeight:'bold', 
	          			fontSize:20,
	          			color:'#FF0000',
	          		}
	          	},
				toolbox: {
					right:'5%',
					feature: {
						dataView: {readOnly: true},															
						restore: {},
						saveAsImage: {}
					}
				},
                series: [ {
                    type: 'wordCloud',
                    sizeRange: [10, 30],
                    rotationRange: [0, 0],  //设置为不旋转                
                    gridSize: 2,            //字符之间的间隔
                    shape: 'pentagon',
                    maskImage: maskImage,  //自定义图案
                    drawOutOfBound: false,
                    textStyle: {
                    		//正常情况下的样式
                    		normal: {
                        		color: '#575757'    	
                    	 	},
                    	 	//鼠标悬浮时的样式
                        	emphasis: {                       	
                        		fontWeight:'bolder', 
                        		fontSize:30,
                            	color: '#00467A'
                        	}
                    },
                    data:[]  //data是通过ajax取的，这里先空着，取完之后再重新渲染

                }],
                //词云下方的logo图,logoURL的地址在最上面
                graphic: {
		             elements: [{
		                 type: 'image',
		                 style: {
		                     image: logoUrl,
		                     width: 280,
		                     height: 40,
		                     opacity: 0.9

		                 },
		                 right: 'center',
		                 bottom: '18%',
		            }]
         		}
            };
			//
            maskImage.onload = function () {
                option.series[0].maskImage
                myChart.setOption(option);
            }

            myChart.showLoading();
            
			//自定义图案的路径
            maskImage.src = 'cd.png';

			//通过ajax取数据
            $.ajax({
			    	type:"get",
			    	url:"cloud.json",
			    	dataType: "json",
			    	success:function(data){
			    		//ajax请求成功时执行
				    	window.onload = setTimeout(function(){
				    		var list = [];
				    		for (var i = 0; i < data.dataCloud.length; i++){
				    			list.push({
				    				name:data.dataCloud[i].name,
				    				value:Number(data.dataCloud[i].value)
				    			})		    			
				    		}		    				    		
				    		myChart.setOption({
				    			series:[{
				    				type: 'wordCloud',
				    				data:list
				    			}]
				    		});
				    	},100)
				    	myChart.hideLoading();
			    	},
			    	
			    	error:function(errorMsg){
			    		//ajax请求失败时执行
						alert("图表请求数据失败!");
						myChart.hideLoading();	    		
			    	}

		    });
		    
		    //添加点击事件
		    myChart.on('click',function(params){
			    	var name = params.name;
			    	var value = params.value;
			    	console.log(name + ":" + value);
		    });

	 		//图表自适应
            window.onresize = function () {
                myChart.resize();
            }
    </script>
</body>
</html>

添加点击事件因为跳出的窗口涉及项目的其他信息，这里没有写。上面这样写可以在控制台输出热词的信息。

cloud.json的格式是这样的：

{"dataCloud":[
			{"name": "Xi's Moments","value": "2020"},
			{"name": "China","value": "1506"},
			{"name": "Panama","value": "1202"},
			{"name": "Global satellite","value": "1109"},
			{"name": "president","value": "1008"},
			{"name": "UNESCO","value": "1010"},
			{"name": "'absolutely right'","value": "960"},
			{"name": "Bohai sea","value": "840"},
			{"name": "pollution","value": "580"},
			{"name": "*","value": "550"},
			{"name": "mainland","value": "2020"},
			{"name": "*","value": "1506"},
			{"name": "gene editing","value": "1202"},
			{"name": "Huaqiang North","value": "1109"},
			{"name": "Chongqing","value": "840"},
			{"name": "Beijing","value": "580"},
			{"name": "Guangzhou","value": "550"},
			{"name": "Shanghai","value": "2020"},
			{"name": "MOC","value": "1506"},
			{"name": "predominates","value": "1202"},
			{"name": "salaries","value": "1109"},
			{"name": "welfare","value": "1008"},
			{"name": "Youth","value": "1010"},
			{"name": "Zhaopin.com","value": "960"},
			{"name": "job seeker","value": "840"},
			{"name": "economic growth","value": "580"},
			{"name": "BRI1","value": "840"}]
}

数据太多不放完整版的了，需要可以自己再添加。

词云的整个实现流程和代码就是这些了，希望可以帮到大家。