使用vue-wordcloud实现文字云/词云

简介: 在项目里面,通过npm安装下载,使用demo

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>


618c0792a943ffb31643b92b95940b7.png

3、参考资料


github地址:

GitHub - feifang/vue-wordcloud: A Vue.js Word Cloud component

npm地址:

vue-wordcloud - npm

目录
相关文章
Echarts实战案例代码(23):富文本实现坐标轴文字和图片排版的解决方案
Echarts实战案例代码(23):富文本实现坐标轴文字和图片排版的解决方案
242 0
|
自然语言处理 Python
wordcloud:自定义背景图片,生成词云
wordcloud:自定义背景图片,生成词云
1967 0
wordcloud:自定义背景图片,生成词云
|
JavaScript 前端开发 Python
vue简单实现词云图组件
JavaScript也有许多可以用来生成词云图的库,但我自己其实都没有使用过,之前使用python的时候倒是用过python的wordcloud库,wordcloud库配合jieba库就可以很好的满足词频统计的需求,但在JavaScript这边我还没有了解很多词频统计这块的相关知识,在网上搜索了一番好像都没有搜索到有有关词频统计的相关库,而在词云生成这一方面的相关库倒是发现有不少,如:js2wordcloud、wordcloud2 等等……这些库都很好地实现了词云图片的展示,现在我也尝试着简单封装一个自己使用的简洁版词云图
694 0
vue简单实现词云图组件
|
6月前
|
JavaScript
Vue2文字提示(Tooltip)
这篇文章介绍了如何在Vue 3框架中创建一个文字提示组件(Tooltip),允许自定义提示框的最大宽度、展示文本和提示文本,支持鼠标悬停显示和隐藏效果。
268 0
Vue2文字提示(Tooltip)
|
5月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
6月前
|
JavaScript
Vue3渐变文字(GradientText)
该文档介绍了一个基于 Vue 的渐变文字组件 `GradientText`,允许用户通过配置参数实现不同样式和尺寸的文字渐变效果。支持自定义起始和结束颜色、渐变角度及多种预设类型(如 `primary`、`info` 等)。
134 0
Vue3渐变文字(GradientText)
|
6月前
Vue3文字提示(Tooltip)
这是一篇关于 Vue2 文字提示(Tooltip)组件的教程,支持多种自定义属性,如最大宽度、展示文本、提示文本、样式、背景色、箭头显示等,并提供了在线预览示例。组件通过监听插槽和 `requestAnimationFrame` 实现了延迟显示与隐藏效果。文章详细介绍了组件实现代码及在页面中的使用方法。
271 0
Vue3文字提示(Tooltip)
|
6月前
|
JavaScript
js图表制作
js图表制作
37 0
|
7月前
|
JavaScript
vue + d3.js(v6) 绘制【饼图】
vue + d3.js(v6) 绘制【饼图】
61 0

热门文章

最新文章