词云

1、安装wordcloud

2、内容贴代码

<template>
  <div class="contain-box">
    <h3 class="title font-15">
      需关注供应商名录
    </h3>
    <div v-show="wordCloudData.length === 0" class="no-data-tips">
      暂无数据
    </div>
    <div id="container" style="height: 270px;border-top: 1px solid rgba(0,0,0,.05);" />
    <div class="tips">
      以上{{ len }}个供应商偏差数据异常，有材料进场损失风险。请按序号重点关注红色供应商，其次关注紫色供应商、蓝色供应商。
      <br>
      <span v-show="wordCloudData.length > 0">点击供应商名称可查看原因。</span>
    </div>
    <div class="tips-icon-box">
      <div class="item">
        <span class="icon-tips" style="background: #FF0000" />
        <span>重点关注</span>
      </div>
      <div class="item">
        <span class="icon-tips" style="background: #800080" />
        <span>一般关注</span>
      </div>
      <div class="item">
        <span class="icon-tips" style="background: #0000FF" />
        <span>关注</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      wordCloudData: {
        type: Array,
        default: () => []
      },
      selectDate: {
        type: Array,
        default: () => []
      },
      materialTags: {
        type: Array,
        default: () => []
      },
      defaultTags: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        fontSizeList: [30, 24, 18],
        fontSizeList2: [24, 20, 16],
        fontSizeList3: [18, 15, 12],
        fontColorList: ['#FF0000', '#800080', '#0000FF'],
        dataObj: {},
        len: ''
      }
    },
    watch: {
      wordCloudData (val) {
        if (val) {
          this.rending(val)
        }
      }
    },
    methods: {
      rending (data) {
        const me = this
        const list = this.dataTrans(data)
        WordCloud(document.getElementById('container'), {
          list,
          rotateRatio: 0,
          color: me.getColor,
          classes: 'test-color-cloud',
          minRotation: -0.01,
          maxRotation: 0.01,
          shape: 'square',
          click: function (word) {
            window.open(`./bi-detail.html#/project?id=${word[2]}&begin=${me.selectDate[0]}&end=${me.selectDate[1]}&materialTags=${[...me.materialTags, ...me.defaultTags].join(',')}`)
          }
        })
      },
      dataTrans (list) {
        const arr = list.length > 20 ? list.splice(0, 20) : list
        const maxName = this.getNameMaxLength(list)
        const len = arr.length
        this.len = len
        let fontSizeList
        if (maxName > 20) {
          fontSizeList = this.fontSizeList3
        } else {
          fontSizeList = len > 10 ? this.fontSizeList3 : len > 6 ? this.fontSizeList2 : this.fontSizeList
        }
        const result = []
        this.dataObj = {}
        list.forEach((item, index) => {
          const tempNum = this.getLevelIndex(len, index)
          let providerName = item.providerName.length > 25 ? item.providerName.substr(0, 25) + '..' : item.providerName
          providerName = index > 8 ? `${index + 1}.${providerName}` : `0${index + 1}.${providerName}`
          result.push([providerName, fontSizeList[tempNum], item.providerName])
          this.dataObj[providerName] = {
            color: this.fontColorList[tempNum]
          }
        })
        return result
      },

      getNameMaxLength (list) {
        let num = 0
        list.forEach(item => {
          if (item.providerName.length > num) {
            num = item.providerName.length
          }
        })
        return num
      },

      getColor (word) {
        return this.dataObj[word].color
      },

      getLevelIndex (len, index) {
        let num = 0
        if (len > 10) {
          switch (true) {
            case index < 5:
              num = 0
              break
            case index < 12:
              num = 1
              break
            default:
              num = 2
          }
        } else {
          switch (true) {
            case index < 3:
              num = 0
              break
            case index < 6:
              num = 1
              break
            default:
              num = 2
          }
        }
        return num
      }
    }
  }
</script>

<style scoped>
.tips {
  font-size: 12px;
  padding: 4px;
  /* border-top: 6px solid #eee; */
}
.contain-box {
  position: relative;
  padding-top: 45px;
}
.title {
  position: absolute;
  z-index: 10;
  background: #fff;
  margin: 0;
  top: 0;
  padding-left: 10px;
  line-height: 45px;
}
.tips-icon-box {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
}
.icon-tips {
  display: inline-block;
  height: 14px;
  width: 25px;
  line-height: 18px;
  margin-right: 6px;
  border-radius: 3px;
}
.item {
  margin-right: 6px;
  line-height: 45px;
}
.no-data-tips {
  position: absolute;
  top: 50%;
  width: 100%;
  font-size: 16px;
  transform: translateY(-50%);
  text-align: center;
  color: rgba(0,0,0,.3);
  z-index: 10;
}
</style>

<style>
.test-color-cloud {
  cursor: pointer;
}
.test-color-cloud:hover {
  background: #ccc;
  z-index: 10;
}
</style>