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'
})
一般用法请看 
<h1 id="normal">一般</h1>
<div id="container" style="height: 400px;"></div>
<h1 id="no-data">无数据</h1>
<div id="container1" style="height: 400px;"></div>
<script src="dist/js2wordcloud.js"></script>
<script>
var option = {
tooltip: {
show: true,
formatter: function(item) {
return item[0] + ': 价值¥' + item[1] + '<br>' + '词云图'
}
},
list: [['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1]],
// list:[["玻璃瓶",941],["塑料瓶",15],["易拉罐",3]],
color: '#15a4fa',
shape: 'circle',
ellipticity: 1
}
var wc = new Js2WordCloud(document.getElementById('container'))
wc.showLoading({
backgroundColor: '#fff',
text: '看见了福建省的附件里是卡洛斯的家乐福就爱上了克拉家乐福及爱丽丝垃圾堆里发简历到复健科了会计师两地分居阿里拉客积分的垃圾费浪费据了解乐山大佛',
effect: 'spin'
})
setTimeout(function() {
wc.hideLoading()
wc.setOption(option)
}, 2000)
setTimeout(function() {
wc.setOption({
noDataLoadingOption: {
backgroundColor: '#f00',
text: '暂无数据'
}
})
}, 4000)
setTimeout(function() {
wc.setOption(option)
}, 6000)
/////////////////
var option1 = {
color: '#15a4fa',
noDataLoadingOption: {
backgroundColor: '#eee',
text: '暂无数据',
textStyle: {
color: '#f00',
fontSize: 20
}
}
}
var wc1 = new Js2WordCloud(document.getElementById('container1'))
wc1.showLoading()
setTimeout(function() {
wc1.hideLoading()
wc1.setOption(option1)
}, 2000)
var option8 = {
tooltip: {
show: true,
formatter: function(item) {
return item[0] + ': 价值¥' + item[1] + '<br>' + '词云图'
}
},
list: [['华莱士', 500000], ['华莱士', 50], ['华莱士', 40], ['华莱士', 40], ['华莱士', 30], ['华莱士', 30], ['华莱士', 20], ['华莱士', 20], ['华莱士', 1], ['华莱士', 1]],
color: 'red'
}
setTimeout(function() {
wc1.setOption(option8)
}, 4000)
window.onresize = function() {
wc.resize()
wc1.resize()
}
/////////////////
</script>图片形状用法请看
<h1 id="shape">图片形状</h1>
<div id="container" style="height: 500px; width: 500px;"></div>
<div class="reality">
<p>The shape that you are seeing is below:</p>
<img src="./shape/twitter.png">
</div>
<script src="dist/js2wordcloud.js"></script>
<script>
var words = []
for (var i = 0; i < 100; i++) {
words.push(['蛤蛤', 10])
}
for (var i = 0; i < 100; i++) {
words.push(['记者', 10])
}
var option = {
tooltip: {
show: true,
formatter: function(item) {
return item[0] + ': 跑得比较快' + item[1] + 'km/h<br>' + '词云图'
}
},
list: words,
color: '#15a4fa',
imageShape: './shape/twitter.png',
ellipticity: 1
}
var wc = new Js2WordCloud(document.getElementById('container'))
wc.showLoading({
backgroundColor: '#fff',
text: '正在加载报道...',
effect: 'spin'
})
setTimeout(function() {
wc.hideLoading()
wc.setOption(option)
}, 2000)
</script>Features
- 支持tooltip。包括tooltip的开关和数据格式化formatter；
- 支持showLoading和hideLoading加载数据loading；
- 支持resize；
- 当词云数值相差过大时，对字体大小范围进行约束；
- 更好地支持图片形状，注意点：
- 请使用图形为纯黑色的白底图片（格式为jpg/png）；
- 如果形状显示不太完美，请不断调整
fontSizeFactor,maxFontSize和minFontSize等参数； - 其他格式（SVG、base64等）暂不支持，请先转换为图片；
Document
API
-
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()
当容器大小变化时，调用此方法进行重绘
腾讯云提供
