Js2WordCloud 詞雲用法

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