vue项目中生成特定形状的词云图——js2wordcloud

 效果图：

 

 

安装依赖：

npm install js2wordcloud

html代码

 css样式

.word-cloud-bg{
    width: 600px;
    height: 500px;
    background: url('../../assets/view/Dashboard_WordCloud_bg.png');
    background-size: 100% 100%;
}

js代码块 

import Js2WordCloud from 'js2wordcloud'

// 生成词云
wordCloud () {
      var wc = new Js2WordCloud(document.getElementById('chart2'))
      let list = []
      for (let i = 1; i< 80; i++){
        list.push([`小白${i}`, 6 * i - 4])
      }
      let option = {
        imageShape: require('@/assets/view/Dashboard_WordCloud_bg.png'),
        fontSizeFactor: 5,
        tooltip: {
          show: true,
          formatter: function (item) {
            return item[0]
          }
        },
        maxFontSize: 30,
        minFontSize: 12,
        color: 'random-light',
        backgroundColor: 'rgba(0,0,0,.0)',
        list: list
      }
      wc.setOption(option)
      window.onresize = function () {
        wc.setOption(option)
      }
}

属性说明：

属性	说明
imageShape	设置词云整体形状，数据越多，效果越明显。注意：这里设置的只是词云图的整体轮廓，如需要显示背景图，可在元素上进行设置
fontSizeFactor	当词云值相差太大，可设置此值进字体行大小微调，默认0.1
maxFontSize	最大fontSize，用来控制weightFactor，默认60
minFontSize	最小fontSize，用来控制weightFactor，默认12
gridSize	密集程度 数字越小越密集，默认 8
weightFactor	字体大小=原始大小*weightFactor
fontWeight	粗细 默认：normal
fontFamily	字体
color	字体颜色，默认 'random-dark' 或者 'random-light'，默认 'random-dark'
backgroundColor	背景颜色
rotateRatio	字体倾斜(旋转)概率，1代表总是倾斜(旋转)
tooltip	提示， tooltip: {     show: false, // 默认false     backgroundColor: 'rgba(0, 0, 0, 0.701961)',         // 默认：'rgba(0, 0, 0, 0.701961)'           formatter: function(item) {                         // 数据格式化函数，item为list的一项     } },
noDataLoadingOption	无数据提示， noDataLoadingOption: {                                  // 无数据提示。             backgroundColor: '#888',             text: '暂无数据',         },
list	数据集
shape	词云图形状，默认'circle'。设置了imageShape，shape属性不生效
ellipticity	椭圆度，配合shape属性使用

 

​

如有问题，欢迎指出~