js2wordcloud.js
JavaScript生成词云图。基于wordcloud2.js
由于Baidu Echarts 2的词云图在设置值较小、值相同的词语时,会出现字符重叠的问题;而又在不能使用Ecahrts 3的情况下……
wordcloud2.js能较好解决这个问题,但某些功能仍未能满足项目需求,故在此进行二次封装,做一些微小的工作。
Installation
- 通过
script
标签引入:
- npm安装:
npm install js2wordcloud --save
Usage
var wc = documentwc
详细用法请看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' // 提供一张图片,根据其形状进行词云渲染,默认为nullfontSizeFactor: 01 // 当词云值相差太大,可设置此值进字体行大小微调,默认0.1maxFontSize: 60 // 最大fontSize,用来控制weightFactor,默认60minFontSize: 12 // 最小fontSize,用来控制weightFactor,默认12tooltip:show: true // 默认:falsebackgroundColor: 'rgba(0, 0, 0, 0.701961)' // 默认:'rgba(0, 0, 0, 0.701961)'{ // 数据格式化函数,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()
当容器大小变化时,调用此方法进行重绘
Licence
MIT