java+vue实现词云生成+展示（kumo+echarts-wordcloud ）

好久没有写过博客了最近项目上的事情弄的很焦灼，最近有点空闲的时间就把项目中学到的东西多多的总结一下，这个词云是我之前写过的一些功能，当时是有一个这个需求自己搜集了一些可以用到的依赖和三方的包，好了话不多说直接开整，先整一张图

前端页面：词云效果图

首先呢：先从后端说起

后端采用了Kumo一个开源的Java词云工具，可以快速构建词云图片。

开源地址

Github：GitHub - kennycason/kumo: Kumo - Java Word Cloud
码云：kumo: Kumo - Java Word Cloud

Maven:

<dependency><groupId>com.kennycason</groupId><artifactId>kumo-core</artifactId><version>1.13</version>
</dependency>
<dependency><groupId>com.kennycason</groupId><artifactId>kumo-tokenizers</artifactId><version>1.12</version>
</dependency>

使用方法
首先创建一个FrequencyAnalyzer(词频分析)对象,该对象用来统计我们所需要构造词云数据的频率，主要包含以下方法：

采用kumo可以直接生成图片，这里为了省事不没有在后端生成，而是把数据转到了前端，

    public List<WordFrequency> wordcloud (String brainstormId)  {// 新建FrequencyAnalyzer 对象（这块是强引用，并发的情况下会造成oom！！！改为弱引用即可）FrequencyAnalyzer frequencyAnalyzer = new FrequencyAnalyzer();// 设置分词返回数量(频率最高的600个词)frequencyAnalyzer.setWordFrequenciesToReturn(600);// 最小分词长度frequencyAnalyzer.setMinWordLength(2);// 引入中文解析器frequencyAnalyzer.setWordTokenizer(new ChineseWordTokenizer());// 可以直接从文件中读取final List<WordFrequency> wordFrequencies = frequencyAnalyzer.load(BrainstormList);return wordFrequencies;}

（备注：BrainstormList为需要处理的数据）

前端

在vue中引入echarts-wordcloud

npm install  echarts-wordcloud --save;
npm install echarts --save


<template><divid="mywordcloud":style="{ width: '100%', height: '300px' }":data="datalist"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
import { WordCloud } from "@/api/brainstorm/brainstorm";
export default {name: "VueWordCloud",data() {return {datalist:[{name:"",value:0}],};},methods: {   dataworcloud(brainstormId) {WordCloud(brainstormId).then((res) => {var result =res.resultfor (let i = 0; i < result.length; i++) {this.datalist.push({name:result[i].word,value:result[i].frequency})}this.initChart();});},initChart() {this.chart = echarts.init(document.getElementById("mywordcloud"));const option = {series: [{type: "wordCloud",//用来调整词之间的距离gridSize: 12,// 形状 circle 圆，cardioid  心， diamond 菱形，shape: "circle",//用来调整字的大小范围sizeRange: [30, 60],//用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容rotationRange: [0, 0],//位置相关设置left: "center",top: "center",right: null,bottom: null,width: "200%",height: "200%",drawOutOfBound: false,//随机生成字体颜色// maskImage: maskImage,textStyle: {color: function () {return ("rgb(" +Math.round(Math.random() * 256) +", " +Math.round(Math.random() * 256) +", " +Math.round(Math.random() * 256) +")");},emphasis: {shadowBlur: 10,shadowColor: "#2ac",},},//数据data: this.datalist,},],};this.chart.setOption(option);},},
};
</script>

前端从后端接收到内容后展示并生成图片，这样我们的词云就完成了：

java+vue实现词云生成+展示（kumo+echarts-wordcloud ）相关推荐

java词云生成，kumo项目详解
0. 前言需要在后端生成一个词云图给小程序. 使用kumo项目实现. 1. demo 首先新建maven项目,prom.xml中加入以下依赖.加完之后记得reload. 要确保自己电脑或者服务器安装 ...
java词云生成Kumo
1,先前在网上寻找Java词云生成包kumo 在gitthub上导入 1)核心包 <dependency><groupId>com.kennycason</groupId ...
深度学习项目实战——1.基于WordCloud词云生成
深度学习项目实战--1.基于WordCloud词云生成准备安装依赖库 pip install wordcloud matplotlib jieba pillow WordCloud()可选的参数 ...
java词云推荐（KUMO）
hello,各位,大年初二,给大家拜年了! 今天给大家介绍一下,使用java生成词云的方法和框架--KUMO(来自github),KUMO是一款使用java编写,应用于词频分析,词云生成的开源技术.不 ...
Python编程：实现词云生成（附详细源码）
Python编程:实现词云生成(附详细源码) 词云是一种数据可视化的方式,它可以用来展示某个主题下的主要关键词汇.在Python中,我们可以使用 wordcloud 库来实现词云的生成.本文将带您一步 ...
bilibili怎么设置弹幕数量_python爬虫：bilibili弹幕爬取+词云生成
如果你懒得看下边的文字,我录了一个完整的教学视频在b站上. 我的B站教学:https://www.bilibili.com/video/av75377135?p=2 工作原理 b站是提供弹幕接口的,所 ...
python中文词云生成_Python 词云生成
图片来自网络所谓"词云"就是对网络文本中出现频率较高的"关键词"予以视觉上的突出,形成"关键词云层"或"关键词渲染",从 ...
python爬取bilibili弹幕_python爬虫：bilibili弹幕爬取+词云生成
如果你懒得看下边的文字,我录了一个完整的教学视频在b站上. 我的B站教学:https://www.bilibili.com/video/av75377135?p=2 工作原理 b站是提供弹幕接口的,所 ...
词云生成库WordCloud详解（一）：概述、ImageColorGenerator类
当前wordcloud版本:1.81 项目地址:https://github.com/amueller/word_cloud API.案例地址:https://amueller.github.io/w ...

java+vue实现词云生成+展示（kumo+echarts-wordcloud ）

Maven:

前端

java+vue实现词云生成+展示（kumo+echarts-wordcloud ）相关推荐

最新文章

热门文章