java+vue实现词云生成+展示(kumo+echarts-wordcloud )

目录

前端页面:词云效果图

Maven:

使用方法:

前端


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

前端页面:词云效果图

首先呢:先从后端说起

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

开源地址

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>
  <div
    id="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.result
        for (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>

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

  • 7
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Upaaui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值