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 对象
       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>

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

java+vue实现一个词云（kumo+echarts-wordcloud ）

Maven:

前端

おすすめ