使用vue-wordcloud实现文字云/词云（亲测可用）

下载相关组件

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>

效果图