技術標籤：Vuevue詞雲圖Wordcloud

首先看下效果圖：

實現步驟：

一、安裝包

npm install vue-b2wordcloud --save

二、main.js中引入包

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

三、頁面使用

<template>
  <div class="">
    <div class="warp-title word-cloud">
      <!-- <span>{{title}}</span> -->
      <!-- <img src="../images/title-icon.png" alt /> -->
      <div class="sortList-title">顧客長購商品</div>
      <vue-wordcloud 
            style="width: 368px;height: 140px;background:#E0E1EB;"
            :options="options" 
            />
    </div>
  </div>
</template>
<script src="dist/vue-b2wordcloud.min.js"></script>
<script>
import './index.scss'
export default {
  // name: 'warpTitle',
  props: {
    flag: {
      type: String
    }
  },
  components: {
  },
  data () {
    return {
      loading: true,
            options: {
                list: [
                    ['感冒靈', 22], ['大白菜', 14], ['香蕉', 14], ['雞蛋', 18], ['板藍根', 16],['感冒靈', 14], ['藥', 14], ['牛奶', 14]
                ],
                color: [
                    ['#5DECBB', '#429CEA'],
                    '#5DECBB',
                    '#429CEA',
                    '#35CCE6'
                ],
                tooltip: {
                  show: false
                },
                backgroundColor: '#4b5f8e',
                rotationRation: 0,
                gridSize: 35,
                minFontSize: 14,
                maxFontSize: 22

            }
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {

  }
}
</script>