在使用echarts来绘制词云图表时除了要引用echarts.js时，还需要引入echarts-wordcloud.js文件。我们先在script里引入
<script src="./js/echarts.min.js"></script>
<script src="./js/echarts-wordcloud.js"></script>然后对创建好的div块进行绑定,具体代码：
// 对div块标签进行绑定
var yEchar = echarts.init(document.getElementById('one'));
//options配置
var option = {
series: [{
type: 'wordCloud',
//maskImage: maskImage,
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(',') + ')';
},
fontFamily: 'sans-serif',
fontWeight: 'normal'
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: keywords
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
}具体配置介绍：
left top right bottom ：代表词云的位置，默认是 center，也就是中间；
shape ：词云的形状，默认是 circle(圆形)，可选的参数有cardioid（心形） 、 diamond（菱形 正方形） 、 triangle-forward 、 triangle（三角形）、 star（星形）、pentagon （五边形）；
width height ：词云的宽高，默认是 75% 80%。
sizeRange ：词云的文字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例， value 最小的渲染为 12px ，最大的渲染为 60px ，中间的值按比例计算相应的数值。
rotationRange rotationStep ：词云中文字的角度，词云中的文字会随机的在 rotationRange 范围内旋转角度，渲染的梯度就是 rotationStep ，这个值越小，词云里出现的角度种类就越多。以上面参数为例，可能旋转的角度就是 -90 -45 0 45 90 。
gridSize ：词云中每个词的间距。
drawOutOfBound ：是否允许词云在边界外渲染，直接使用默认参数 false 就可以，否则容易造成词重叠。
textStyle ：词云中文字的样式， normal 是初始的样式， emphasis 是鼠标移到文字上的样式。
maskImage： 词云轮廓图，白色区域将被排除在绘图文本之外,形状选项将继续应用为云的形状，如下图所示。
这是最简单基础的词云图制作，学习的更深还可以制作各种样式和各种类型的词云图哦~
