javascript wordcloud, based on wordcloud2.js. js词云,增强特性
JavaScript生成词云图。基于wordcloud2.js
由于Baidu Echarts 2的词云图在设置值较小、值相同的词语时,会出现字符重叠的问题;而又在不能使用Ecahrts 3的情况下……
wordcloud2.js能较好解决这个问题,但某些功能仍未能满足项目需求,故在此进行二次封装,做一些微小的工作。
script
标签引入:<script src="dist/js2wordcloud.min.js"></script>
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'
})
一般用法请看index.html
。点击demo
图片形状用法请看index-shape.html
。点击demo
fontSizeFactor
, maxFontSize
和minFontSize
等参数;setOption(options)
options必须通过此API进行设置,才能显示词云
在wordcloud2.js原options基础上增加:
{
// ...
imageShape: 'https://example.com/images/shape.png', // 提供一张图片(链接方式,仅支持jpg/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()
当容器大小变化时,调用此方法进行重绘
MIT