下载相关组件
npm install vue-wordcloud --save
页面内使用
<template>
<div class="hello">
<div id="app">
<wordcloud
:data="defaultWords"
nameKey="name"
valueKey="value"
:color="myColors"
:showTooltip="false"
:wordClick="wordClickHandler">
</wordcloud>
</div>
</div>
</template>
<script>
import wordcloud from 'vue-wordcloud'
export default {
name: 'app',
components: {
wordcloud
},
methods: {
wordClickHandler(name, value) {
this.$notify({
title: name,
message: "数量:"+value
});
}
},
data() {
return {
myColors: ['#1f77b4', '#5e8753', '#115889', '#901593'],
defaultWords: [
{
"name": "学习强军",
"value": 26
},
{
"name": "钓鱼",
"value": 19
},
{
"name": "网站应用",
"value": 18
},
{
"name": "青年大学习",
"value": 16
},
{
"name": "poi",
"value": 15
},
{
"name": "rrr",
"value": 26
},
{
"name": "ccc",
"value": 19
},
{
"name": "vvv",
"value": 18
},
{
"name": "bbb",
"value": 16
},
{
"name": "aaa",
"value": 15
},
{
"name": "天下大同",
"value": 9
}
]
}
}
}
</script>