vue中使用vue-b2wordcloud创建词云

安装使用

安装：使用npm install vue-b2wordcloud --save或者直接在vue ui中添加vue-b2wordcloud运行依赖

使用：在main.js中导入使用

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

使用说明

1. 如果词云数据不需异步，那直接在options.list写上对应数组就行了。
2. 如果数据使用异步，必须绑定loding属性,且设置为true,异步返回后再设为false。原理:其内通过v-if影响了组件的生命周期。
3. 相关参数的配置说明：b2wordcloud参数配置 和 wordcloud2 API

使用案例

<template>
  <vue-wordcloud style="width: 100%; height: 500px;"
    :options="options"
    :loading="loading"
  />
</template>
<script>
export default {
  data: function() {
    return {
      loading: true,
      options: {
        renderer: 'div',
        list: [],
        backgroundColor: 'transparent',
        gridSize: 35,
        fontFamily: 'Finger Paint, cursive, sans-serif',
        fontWeight: '600',
        color: 'random-dark',
        minFontSize: 30,
        rotateRatio: 0,
        click: this.clickTag,
        cursorWhenHover: 'pointer'
      }
    }
  },
  mounted() {
    this.getTagArr()
  },
  methods: {
    clickTag(item) {
      this.$router.push({ name: 'tag', params: { tagName: item[0] } })},
    getTagArr() {
      this.$http.get('/tag/queryAll').then(res => {
        this.options.list = res.data
        this.loading = false
      })
    }
  }
}
</script>