echarts如何實現關鍵詞雲圖

百度Echarts現已更新到4版本，字符雲功能現在已經不在Echarts的官方示例中了。通過官網里面也找不到對應的API和具體介紹。

如果需要進行開發的話需要單獨引用專門的js文件。

下面是下載的百度雲鏈接：

鏈接：https://pan.baidu.com/s/1xrNgnr6pd16NL7_vdxBRaQ
提取碼：zhze

里面包含兩個文件，一個是echarts-wordcloud，另一個是支持詞雲的echart js文件：echart3.js。

頁面導入js文件后，首先要在頁面中給定一個用來生成詞雲圖的容器：

<div  id="wordcloud_echarts" style="height:90%;"></div>

　　然后再js里直接渲染就可以了，跟echarts中的餅圖折線圖等類似。

       js代碼部分：

 var myChart = echarts3.init(document.getElementById('wordcloud_echarts'));
 var keywords = [{"name":"男神","value":2.64},
                 {"name":"好身材","value":4.03},
                 {"name":"校草","value":24.95},
                 {"name":"酷","value":4.04},
                 {"name":"時尚","value":5.27},
                 {"name":"陽光活力","value":5.80},
                 {"name":"初戀","value":3.09},
                 {"name":"英俊瀟灑","value":24.71},
                 {"name":"霸氣","value":6.33},
                 {"name":"靦腆","value":2.55},
                 {"name":"蠢萌","value":3.88},
                 {"name":"青春","value":8.04},
                 {"name":"網紅","value":5.87},
                 {"name":"萌","value":6.97},
                 {"name":"認真","value":2.53},
                 {"name":"古典","value":2.49},
                 {"name":"溫柔","value":3.91},
                 {"name":"有個性","value":3.25},
                 {"name":"可愛","value":9.93},
                 {"name":"幽默詼諧","value":3.65}]

                var option = {
				series: [{
					type: 'wordCloud',
					sizeRange: [15, 80],
					rotationRange: [0, 0],
					rotationStep: 45,
					gridSize: 8,
					shape: 'pentagon',
					width: '100%',
					height: '100%',
					textStyle: {
						normal: {
							color: function () {
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						}
					},
					data: keywords
				}]
			};
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });

    }

　

       這樣的話一個靜態數據的詞雲圖就生成了，如果需要后端的時候再寫個異步請求得到數據后再渲染詞雲圖就可以啦

       效果圖：