npm安装：
npm install js2wordcloud --save
用法
var wc = new Js2WordCloud(document.getElementById('container'))
wc.setOption({
tooltip: {
show: true
},
list: [['谈笑风生', 80], ['谈笑风生', 80], ['谈笑风生', 70], ['谈笑风生', 70], ['谈笑风生', 60], ['谈笑风生', 60]],
color: '#15a4fa'
})
Document
API （https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md）
-
setOption(options)
options必须通过此API进行设置，才能显示词云
在wordcloud2.js原options基础上增加：
{
// ...
imageShape: 'https://example.com/images/shape.png', // 提供一张图片，根据其形状进行词云渲染，默认为null
fontSizeFactor: 0.1, // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1
maxFontSize: 60, // 最大fontSize，用来控制weightFactor，默认60
minFontSize: 12, // 最小fontSize，用来控制weightFactor，默认12
tooltip: {
show: true, // 默认：false
backgroundColor: 'rgba(0, 0, 0, 0.701961)', // 默认：'rgba(0, 0, 0, 0.701961)'
formatter: function(item) { // 数据格式化函数，item为list的一项
}
},
noDataLoadingOption: { // 无数据提示。
backgroundColor: '#eee',
text: '暂无数据',
textStyle: {
color: '#888',
fontSize: 14
}
}
// ...
} -
showLoading([loadingOption])
过渡控制，显示loading（读取中）。可选。
loadingOption:{
backgroundColor: '#eee',
text: '正在加载...',
effect: 'spin' // 默认：null, { String | Function } 可选：'spin|normal'；也可为回调函数，回调函数生成HTML
} -
hideLoading()
隐藏loading
-
resize()
当容器大小变化时，调用此方法进行重绘
-
wordcloud2函数说明
wordcloud2(data, size = 1, minSize = 0, gridSize = 0,
fontFamily = NULL, fontWeight = 'normal',
color = 'random-dark', backgroundColor = "white",
minRotation = -pi/4, maxRotation = pi/4, rotateRatio = 0.4,
shape = 'circle', ellipticity = 0.65, widgetsize = NULL)
常用参数：
（1）data：词云生成数据，包含具体词语以及频率；
（2）size：字体大小，默认为1，一般来说该值越小，生成的形状轮廓越明显；
（3）fontFamily：字体，如‘微软雅黑’；
（4）fontWeight：字体粗细，包含‘normal’，‘bold’以及‘600’；；
（5）color：字体颜色，可以选择‘random-dark’以及‘random-light’，其实就是颜色色系；
（6）backgroundColor：背景颜色，支持R语言中的常用颜色，如‘gray’，‘blcak’，但是还支持不了更加具体的颜色选择，如‘gray20’；
（7）minRontatin与maxRontatin：字体旋转角度范围的最小值以及最大值，选定后，字体会在该范围内随机旋转；
（8）rotationRation：字体旋转比例，如设定为1，则全部词语都会发生旋转；
（9）shape：词云形状选择，默认是‘circle’，即圆形。还可以选择‘cardioid’（苹果形或心形），‘star’（星形），‘diamond’（钻石），‘triangle-forward’（三角形），‘triangle’（三角形），‘pentagon’（五边形）；
-
事例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<style>
#container{
width: 1000px;
margin: 100px auto;
border: 1px solid #ccc;
}
</style>
<body>
<h1>一般</h1>
<div id="container" style="height: 400px;"></div>
<!-- <h1>无数据</h1>
<div id="container1" style="height: 400px;"></div> -->
<script src="./node_modules/js2wordcloud/dist/js2wordcloud.js"></script>
<script>
function getnum(){
return parseInt(Math.random()*100)
}
var arr1 = new Array(100);
arr1[0] = ['减肥而附加费', 1]
arr1[1] = ['v 发表观后感', 11]
arr1[2] = ['我', 78]
arr1[3] = ['解决国家', 18]
arr1[4] = ['结构图然后 iu 越糊涂', 20]
arr1[5] = ['就斤斤计较', 30]
arr1[6] = ['的', 101]
arr1[7] = ['给她', 100]
arr1[8] = ['会议厅', 10]
arr1[9] = ['非日任何个人和 u 研讨会', 90]
for(var i=10;i<arr1.length;i++){
var num = getnum()
arr1[i] = ['谈笑风生', num];
}
console.log(arr1);
var option = {
// tooltip: {
// show: true,
// formatter: function(item) {
// return item[0] + ': 价值¥' + item[1] + '<br>' + '词云图'
// }
// },
// list: [['谈笑风生', 500], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 1000], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1]],
list: arr1,
color: 'random-dark',
// shape: 'circle',
ellipticity: 1,
minRotation: -1.57080,
maxRotation: -1.57080,
rotateRatio: .4,
fontSizeFactor: 5, // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1
maxFontSize: 60, // 最大fontSize，用来控制weightFactor，默认60
minFontSize: 20,
gridSize: 10,
// ratationSteps: 2,
// rotationRation: .5,
// shuffle: 30
// shape: 'circle',
// cardioid: 'diamond'
cardioid: 'square' }
var wc = new Js2WordCloud(document.getElementById('container'))
wc.setOption(option) window.onresize = function() {
wc.resize()
}
</script>
</body>
</html>