首先看下效果图:
实现步骤:
一、安装包
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>