vue使用Js2WordCloud做词云

基于wordcloud2.js的动态词云

最近项目中有使用记录一下，以后好找。。
1、先安装

npm install js2wordcloud --save

2、vue使用这个词云的组件引用

import Js2WordCloud from 'js2wordcloud'

3、下面就直接贴代码啦

<div id="container" ref="chart" :style="{width: '100%', height: '100%'}"></div>

//下面的代码放到一个函数里或者处始化的时候加载也可以
 var wc = new Js2WordCloud(document.getElementById('container'))
        wc.setOption({
            imageShape:'http://c.hiphotos.baidu.com/zhidao/pic/item/d52a2834349b033bc91c09cf16ce36d3d539bd0b.jpg',
            fontSizeFactor: 0.1,  // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1
            maxFontSize: 60,      // 最大fontSize，用来控制weightFactor，默认60
            minFontSize: 14,      // 最大fontSize，用来控制weightFactor，默认60
            gridSize: 6,          // 密集程度 数字越小越密集
            weightFactor: 1,      // 字体大小=原始大小*weightFactor
            fontWeight: 'normal', //字体粗细
            fontFamily: 'Times, serif', // 字体
            color: 'random-dark', // 字体颜色 'random-dark' 或者 'random-light'
            backgroundColor: '#fff', // 背景颜色
            rotateRatio: 0.8, // 字体倾斜(旋转)概率，1代表总是倾斜(旋转)
            tooltip: {
                show: false,
                backgroundColor: 'rgba(0, 0, 0, 0.701961)',         // 默认：'rgba(0, 0, 0, 0.701961)'
                  formatter: function(item) {                         // 数据格式化函数，item为list的一项
                }
            },
            noDataLoadingOption: {                                  // 无数据提示。
            backgroundColor: '#888',
            text: '暂无数据',
        },
            list: [['谈笑风生', 80], ['谈笑风生', 80]],
        })

可以复制，跑一下加载出来，在根据自己的需要修改，图片的形状和数据都可以动态加载