1、下载
在项目里面,通过npm安装下载
npm install vue-wordcloud --save
2、使用demo
<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, vm) {
console.log('wordClickHandler', name, value, vm);
}
},
data() {
return {
myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
defaultWords: [{
"name": "Cat",
"value": 26
},
{
"name": "fish",
"value": 19
},
{
"name": "things",
"value": 18
},
{
"name": "look",
"value": 16
},
{
"name": "two",
"value": 15
},
{
"name": "fun",
"value": 9
}
]
}
}
}
</script>
3、参考资料
github地址:
GitHub - feifang/vue-wordcloud: A Vue.js Word Cloud component
npm地址: