Js2wordcloud NPM

js2wordcloud.js

JavaScript生成词云图。基于wordcloud2.js

由于Baidu Echarts 2的词云图在设置值较小、值相同的词语时，会出现字符重叠的问题；而又在不能使用Ecahrts 3的情况下……

wordcloud2.js能较好解决这个问题，但某些功能仍未能满足项目需求，故在此进行二次封装，做一些微小的工作。

Installation

通过script标签引入：

<script src="dist/js2wordcloud.min.js"></script>

npm安装：

npm install js2wordcloud --save

Usage

var wc = new Js2WordCloud(document.getElementById('container'))
wc.setOption({
    tooltip: {
        show: true
    },
    list: [['谈笑风生', 80], ['谈笑风生', 80], ['谈笑风生', 70], ['谈笑风生', 70], ['谈笑风生', 60], ['谈笑风生', 60]],
    color: '#15a4fa'
})

详细用法请看index.html。点击demo

Features

支持tooltip。包括tooltip的开关和数据格式化formatter；
支持showLoading和hideLoading加载数据loading；
支持resize；
当词云数值相差过大时，对字体大小范围进行约束；
更好地支持图片形状。

Document

API

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
}