使用vue-wordcloud實現文字雲/詞雲

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

https://github.com/feifang/vue-wordcloud

npm地址：

https://www.npmjs.com/package/vue-wordcloud