wordcloud for Vue

A wordcloud component for Vue.

Install

npm install @blackywkl/vuewordcloud

Example

<template>
	<div id="app">
      <wordcloud v-bind:texts="texts"></wordcloud>
  </div>
</template>

<script>
import Wordcloud from '@blackywkl/vuewordcloud';

export default {
  	name: 'app',
  	components: {
    	Wordcloud
  	},
  	data() {
    	return {
      		defaultWords: [{
          		text: 'Cat',
          		size: 26
        	}, {
          		text: 'fish',
          		size: 19
        	}, {
          		text: 'things',
          		size: 18
        	}, {
          		text: 'look',
          		size: 16
        	}, {
          		text: 'two',
          		size: 15
        	}, {
        	    text: 'fun',
        	    size: 9
        	}, {
        	    text: 'know',
        	    size: 9
        	}, {
        	    text: 'good',
        	    size: 9
        	}, {
        	    text: 'play',
        	    size: 6
        	}]
    	}
  	}
}
</script>

Props

| name | meaning | type | default value | | --------- | ------------------------------------- | ------- | ------------- | | texts | array contain each text | Array | [] | | width | width(px) for entire component | Number | 400 | | height | height(px) for entire component | Number | 400 | | mouseStop | stop the word when the mouse is hover | Boolean | false |

properties for each item in texts

| name | meaning | type | default value | | ---------- | ------------------------ | ------ | ---------------- | | text | word to show | String | test | | size | font size for the word | Number | random | | fontFamily | font family for the word | String | Microsoft YaHei | | color | color for the word | String | rgb(200,200,200) |

Todos

• [ ] Add github page
• [x] Add online demo(codesandbox)
• [ ] Add test
• [x] Add callback for click
• [ ] Add attribute to avoid collision
• [ ] Add attribute to controll speed

License

MIT.