词云 vue-b2wordcloud

前言 词云，说起来可能并不是很熟，但是开发中会用到哦！效果图如下：

安装

npm install vue-b2wordcloud --save

引入

在main.js里引入

import VueWordcloud from 'vue-b2wordcloud'
Vue.use(VueWordcloud)

使用

 <vue-wordcloud style="width: 1000px;height: 1000px;background:none" id="canvas" :options="options" :loading="loading"/>

	    loading:true,
        options: {
          list: [["克服恐惧", 12],["克服恐惧", 12]],//需要按展示的数据
          color: [["#16ebf0"],["#ffde39"]],//展示数据的颜色，也可以值是一种颜色，如： color:'#15a4fa'
          color(word, weight, fontSize, distance, theta) { //自定义颜色
             if (weight == 12) {
                 return '#DDDDDD';
             } else {
                 return "red";
             }
          },
          backgroundColor: 'rgba(255, 255, 255, 0)',//背景颜色
          fontFamily: "微软雅黑",//字体
          fontSizeFactor: 0.1, // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1
          minFontSize: 12,//最小字号
          maxFontSize: 20,//最大字号
          tooltip: {
            show: true, // 默认：false
            backgroundColor: 'red', // 默认：'rgba(0, 0, 0, 0.701961)'
            formatter: function (item) { // 数据格式化函数，item为list的一项
            return `<div>1212</div></br>${item}`
            }
          },
          shape: 'circle',//形状
          ellipticity: 3,//椭圆度（展示数据的形状）
          rotationSteps: 30,//旋转步骤
          rotateRatio: 0.5,//旋转
          imageShape: require('@/assets/images/data-center/man.png'), //支持自定义图形
          click(item, dimension, event) { //支持点击事件
          },
          noDataLoadingOption: { // 无数据提示。
            backgroundColor: 'red',
            text: '暂无数据',
            textStyle: {
              color: '#888',
              fontSize: 14
            }
          }
        },

   setTimeout(()=>{
        this.loading=false
      },10000)

我这里值写了部分，更详细的可以查看b2wordcloud options配置