1、引入
npm 安装：
npm install js2wordcloud --save
通过script引入：
<script src="dist/js2wordcloud.min.js"></script>
2、用法类似如下
html：
<div id="friendsWordCloud" class="friends-word-cloud"></div>
js：
var wc = new Js2WordCloud(document.getElementById(‘friendsWordCloud‘)); //容器 ???wc.setOption({ ???????tooltip: { ???????? show: false, // 默认：false ??????????backgroundColor: ‘rgba(0, 0, 0, 0.701961)‘, ??????????formatter: function(item) { ??????????????if (item[1] > 12) { ??????????????????document.querySelector(‘.__wc_tooltip__‘).style.backgroundColor = ‘rgba(0, 0, 0, 0.701961)‘; ??????????????????return item[0] + ‘：‘ + item[2]; ??????????????} else { ??????????????????document.querySelector(‘.__wc_tooltip__‘).style.backgroundColor = ‘transparent‘; ??????????????????return ‘‘; ???????????? } ??????????} ???????}, ???????list: [[‘谈笑风生‘, 80], [‘谈笑风生‘, 80]], ???????gridSize: 6, ???????fontSizeFactor: 0.1, ???????maxFontSize: 36, ???????minFontSize: 12, ???????rotationSteps: 30, ???????rotateRatio: 0.5, ???????ellipticity: 1, ???????wait: 10, ???????abortThreshold: 2000, ???????color(word, weight, fontSize, distance, theta) { //自定义颜色 ????????????if (weight == 12) { ????????????????return ‘#DDDDDD‘; ????????????} else { ????????????????if (_this.colorIndex >= 6) { ?????????????????????_this.colorIndex = -1; ????????????????} ????????????????_this.colorIndex += 1; ????????????????return _this.colors[_this.colorIndex]; ????????????} ???????}, ???????backgroundColor: ‘rgba(255, 255, 255, 0)‘, ???????imageShape: require(‘@/assets/images/data-center/man.png‘), //支持自定义图形 ???????click(item, dimension, event) { //支持点击事件 ?????????????_this.showTip = false; ?????????????if (item.length > 0 && (item[1] > 12)) { ??????????????????Toast({ ??????????????????????message: item[0] + ‘：‘ + item[2] + ‘人‘ ??????????????????}); ?????????????} ???????} ?});
具体API可以参考以下路径：
文档地址：https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md
新增加特性： https://www.npmjs.com/package/js2wordcloud
图形生成器：https://wordcloud2-js.timdream.org/shape-generator.html
Js2WordCloud 词云用法
原文地址：https://www.cnblogs.com/peter-web/p/10214538.html