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地址: