echats词云图

最新推荐文章于 2024-07-26 08:30:00 发布

青松pine

最新推荐文章于 2024-07-26 08:30:00 发布

阅读量169

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/qq_43223007/article/details/119784020

版权

本文介绍了如何在Vue项目中使用vue-wordcloud插件创建词云图。首先通过npm安装插件，然后在模板中引入并配置组件，包括设置数据、颜色、提示框显示及点击事件处理等。示例代码展示了具体的实现细节。

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

echarts拓展词云图使用方法

附图：
在这里插入图片描述

安装

 npm install vue-wordcloud --save //安装词云插件

案例:

<template>
  <div class="hello">
      <wordcloud
      style="width:300px;height:300px"
      :data="defaultWords"
      nameKey="name"
      valueKey="value"
      :color="myColors"
      :showTooltip="false"
      :wordClick="wordClickHandler">
      </wordcloud
  </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
        }
      ]
    }
  }
}
</script>