词云-vue-wordcloud组件封装

最新推荐文章于 2024-08-09 07:00:15 发布

IT-精英联盟

最新推荐文章于 2024-08-09 07:00:15 发布

阅读量941

点赞数 1

分类专栏： vue vue-wordCloud vue词云

IT-精英联盟

本文链接：https://blog.csdn.net/qq_34462220/article/details/115400215

版权

本文介绍了如何在Vue项目中安装并封装vue-wordcloud组件，详细讲解了通过npm安装过程以及组件所需的参数配置，包括'val'、'myColors'、'width'和'height'等属性。

摘要由CSDN通过智能技术生成

1.安装 vue-wordcloud在项目里面，通过npm安装下载

npm install vue-wordcloud --save

2.组件传参

props:['val','myColors','width', 'height'],

<template>
  <div class="hello">

  <div id="app">
     <wordcloud
      :data="val"
      ref="word"
      nameKey="name"
      valueKey="value"
      :fontSize='[10, 20]'
      :color="myColors"
      :showTooltip="true"
      :wordClick="wordClickHandler">
      </wordcloud>
  </div>
  </div>

</template>
<script>
import wordcloud from 'vue-wordcloud'
export default {
  name: 'wordCloud',
  props:['val','myColors','width', 'height'],
  components: {
    wordcloud
  },
    mounted() {
      console.log(this.$ref