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
    评论
要在Vue项目中使用echarts-wordcloud绘制词云图,可以按照以下步骤操作: 1. 安装echartsecharts-wordcloud插件 ```bash npm install echarts --save npm install echarts-wordcloud --save ``` 2. 在需要使用词云图的组件中引入echarts ```javascript import echarts from 'echarts' ``` 3. 在mounted生命周期中初始化echarts实例,并设置词云图的配置项 ```javascript mounted() { const chartDom = this.$refs.chart const myChart = echarts.init(chartDom) const option = { series: [{ type: 'wordCloud', shape: 'circle', sizeRange: [20, 80], rotationRange: [-90, 90], rotationStep: 45, gridSize: 2, textStyle: { normal: { fontFamily: 'sans-serif', fontWeight: 'bold', color: function () { return 'rgb(' + [ Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255) ].join(',') + ')' } } }, data: [ { name: 'Apple', value: 10000 }, { name: 'Banana', value: 6181 }, { name: 'Orange', value: 4386 }, { name: 'Watermelon', value: 4055 }, { name: 'Pineapple', value: 2467 }, { name: 'Grape', value: 2244 }, { name: 'Mango', value: 1898 }, { name: 'Pear', value: 1484 }, { name: 'Cherry', value: 1001 }, { name: 'Peach', value: 987 }, { name: 'Kiwi', value: 900 } ] }] } myChart.setOption(option) } ``` 4. 在模板中添加echarts实例的容器 ```html <template> <div> <div ref="chart" style="width: 600px; height: 400px;"></div> </div> </template> ``` 以上就是在Vue项目中使用echarts-wordcloud绘制词云图的步骤,需要注意的是,词云图的配置项需要根据实际需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Upaaui

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

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

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

打赏作者

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

抵扣说明:

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

余额充值