使用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

目录
相关文章
|
JavaScript 前端开发 Python
vue简单实现词云图组件
JavaScript也有许多可以用来生成词云图的库,但我自己其实都没有使用过,之前使用python的时候倒是用过python的wordcloud库,wordcloud库配合jieba库就可以很好的满足词频统计的需求,但在JavaScript这边我还没有了解很多词频统计这块的相关知识,在网上搜索了一番好像都没有搜索到有有关词频统计的相关库,而在词云生成这一方面的相关库倒是发现有不少,如:js2wordcloud、wordcloud2 等等……这些库都很好地实现了词云图片的展示,现在我也尝试着简单封装一个自己使用的简洁版词云图
1212 0
vue简单实现词云图组件
|
JavaScript 数据可视化
Vue引入Echarts词云图实现数据可视化(实现源码+案例)
本文主要讲Vue如何引入Echarts词云图实现数据可视化
2562 0
Vue引入Echarts词云图实现数据可视化(实现源码+案例)
|
应用服务中间件 nginx
nginx优化:URI过长或request header过大导致400或414报错
当出现URI过长或请求头过大导致400或414报错时,可以通过以下方式对Nginx进行优化: 1. 调整client_max_body_size参数:该参数用于限制请求体的大小。默认情况下,Nginx的client_max_body_size参数设置为1M。如果请求体超过这个大小,Nginx会返回400错误。您可以根据实际需求适当增加这个值,例如设置为10M或更大。 ``` http { client_max_body_size 10M; } ``` 2. 调整large_client_header_buffers参数:该参数用于调整请求头缓冲区的大
8897 0
|
JavaScript 前端开发
vue 实现word文档预览和下载
vue 实现word文档预览和下载
2010 0
|
JavaScript
Vue~在线预览doc、docx、pdf、img文件
Vue~在线预览doc、docx、pdf、img文件
8360 0
|
JavaScript 前端开发 搜索推荐
ECharts词云图(案例一)+配置项详解
ECharts,百度的JavaScript图表库,支持词云图(自5.0版起),借助`echarts-wordcloud`插件。配置词云图涉及`tooltip`(如显示、颜色、边框等)和`series`(类型、形状、大小范围等)。示例代码展示了如何在HTML中引入依赖并配置词云图,包括数据、形状、大小、颜色等。完整代码和依赖可下载。调整这些配置可创建个性化词云图。参阅官方文档获取不同版本详情。
6652 4
 ECharts词云图(案例一)+配置项详解
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
28544 154
|
JSON JavaScript 前端开发
shpfile转GeoJSON;控制shp转GeoJSON的精度;如何获取GeoJSON;GeoJSON是什么有什么用;GeoJSON结构详解(带数据示例)
在使用Openlayers、leaflet、mapbox等地图控件的时候,GeoJSON几乎是不可避免打交道的数据类型,如果您想要从事gis行业相关的开发工作,本篇文章应该能为您带来一些帮助。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
搜索推荐 数据可视化 前端开发
ECharts 词云图案例【用户画像】:创意蒙版应用
使用ECharts创建词云图,结合蒙版技术提升可视化创意。通过设置`maskImage`属性,将自定义图像作为词云的外形,如用户画像。案例中详细介绍了HTML结构、ECharts配置及蒙版图像加载过程,鼓励探索SVG路径和CSS样式以实现更多个性化效果。代码和依赖可下载,激发更多数据可视化灵感。
1501 0
 ECharts 词云图案例【用户画像】:创意蒙版应用
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
4000 1
Vue3项目使用G6可视化组件实现一个树形机构图