js2wordcloud 词云包的使用

js文件下载：

https://github.com/liangbizhi/js2wordcloud/tree/master/

dist文件夹内

引用:

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

用法：

html标签body的内部新建一个div， id设置为container

<div id="container"></div>

var wc = new Js2WordCloud(document.getElementById('container'))

#当然这里也可以改成 var wc = new Js2WordCloud($('container')[0])

wc.setOption({
    tooltip: {
        show: true
    },
    list: [['谈笑风生', 80], ['谈笑风生', 80], ['谈笑风生', 70], ['谈笑风生', 70], ['谈笑风生', 60], ['谈笑风生', 60]],
    color: '#15a4fa'
})

demo

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
}

hideLoading()

隐藏loading

resize()

当容器大小变化时，调用此方法进行重绘

demo调用源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <h1>一般</h1>
    <div id="container" style="height: 400px;"></div>
    <h1>无数据</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>
</body>
</html>

posted @ 2018-06-05 20:30 dandyzhang 阅读(9651) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dandy Zhang

Where amazing happens ...

js2wordcloud 词云包的使用

公告