vue 精选评论词云 集成echarts-wordcloud TF-IDF算法

本文主要是介绍vue 精选评论词云 集成echarts-wordcloud TF-IDF算法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这一期在我们的系统里集成词云组件,开发的功能是景区精选评论的词云展示功能。

这个界面的逻辑是这样的:

在数据框里输入城市,可以是模糊搜索的,选择城市;

选择城市后,发往后台去查询该城市的精选评论,由于一个城市会有很多景点,所以精选评论也有很多,采用TF-IDF算法,计算关键词,返回给前端,使用echarts词云组件进行可视化;

再次输入城市,可以切换城市,同时词云会重新渲染。

1 词云页面开发

首先前端安装词云,(注意这边的echarts必须是v5+,如果是4就要使用echarts-wordcloud 1.0版本)

npm install echarts-wordcloud@2

然后在main.js中引入

Vue.component('v-chart', ECharts);
import "echarts-wordcloud"

创建一个WordCloud.vue组件,组件的高度和数据从外部传入

<template><v-chartstyle="width:100%; ":option="chartOption":style="{ height: height }"autoresize/>
</template><script>export default {name: 'WordCloud',props: {words: {type: Array,required: true},height: {type: String,required: true},},watch: {words: {immediate: true,handler() {this.initChart();}}},data() {return {chartOption: {},maskImage: new Image(),data: [],};},async mounted() {// this.initChart()},methods: {initChart() {// this.maskImage.src = require('@/assets/rensen.png')console.log('init wordcloud...')console.log(this.words)setTimeout(() => {this.chartOption = this.buildChartOption();// console.log(this.chartOption)}, 1000)},buildChartOption() {// console.log(this.maskImage)const option = {// background: '#FFFFFF',tooltip: {formatter: '{b}<br/> 出现频次:{c}  '},series: [ {// maskImage: this.maskImage,type: 'wordCloud',gridSize: 2,sizeRange: [20, 80],// shape: 'heart',layoutAnimation: true,textStyle:{textBorderColor: 'rgba(255,255,255,0.3)',textBorderWidth: 1,color: ()=>{return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';},emphasis: {fontSize: 20,shadowBlur: 10,shadowColor: 'rgba(255,255,255,.1)'}},data: this.words} ]};return option;},}
};
</script>

创建Word.vue 词云组件页面,这个组件集成了el-autocomplete组件,可以远程搜索城市,这个在上一篇博文里有说过怎么开发了,这边主要是集成WordCloud.vue组件,通过get_wordcloud 方法来从后端加载精选评论词频分析数据。

<template><div><el-row :gutter="20"><!-- 输入框放在图表上方 --><el-autocompletev-model="city":fetch-suggestions="querySearch"placeholder="请输入城市名称"@select="handleSelect"style="width: 300px; margin-left: 10px;"clearable></el-autocomplete><!-- Top chart --><el-col :span="24"><div class="chart" :style="{ height: parentHeight }"><word-cloud :height="childHeight" :words="words"/></div></el-col></el-row></div>
</template><script>
import {getCities, get_wordcloud} from "@/api/tour";
import WordCloud from "@/components/WordCloud.vue";export default {name: 'Dashboard',data(){return{city: '',words: [],}},components: {WordCloud},mounted() {get_wordcloud(this.city).then(res=>{this.words = res.data.data})},computed: {parentHeight() {return `calc(100vh - 140px)`; // 父组件高度},childHeight() {return `calc(100vh - 140px)`; // 子组件高度}},methods: {// el-autocomplete组件的cb 为回调函数需要把后端返回的值传给它querySearch(queryString, cb) {// 发送请求到Flask后端获取模糊搜索结果getCities(queryString).then(res=>{// console.log(res.data.data.map(i=>{return i.value}))cb(res.data.data)})},// el-autocomplete组件选择handleSelect(item) {this.city = item.value; // 选择后将城市名存储在city变量中console.log('选择了:', this.city);this.$message('加载'+this.city+'数据成功', 'success', 3000)get_wordcloud(this.city).then(res=>{this.words = res.data.data})},},
};
</script><style scoped>
.chart {/*display: flex;*/align-items: center;justify-content: center;margin-top: 10px;color: white;font-size: 20px;border-radius: 10px;background-color: #f4eeee;
}
</style>

添加一个方法:

// 词云
export function  get_wordcloud(keyword){return request({url: `/tour/wordcloud`,method: 'get',params:{ keyword: keyword }});
}

2 后端接口开发

后端接口根据前端传递过来关键词去查询该城市下的所有精选评论数据,然后使用jieba分词进行中文分析,过滤2个字以下的内容,然后创建TF-IDF向量化器计算每个词的TF-IDF词,排序之后,获取前100的重要词返回给前端。

# 词云接口
@main.route('/tour/wordcloud', methods=['GET'])
def get_wordcloud():keyword = request.args.get('keyword', '')if keyword=='':keyword = '东京'try:# 查询符合条件的 Tourcomments = db.session.query(Tour.select_comment).filter(Tour.city == keyword).all()# 提取评论文本comments_text = [comment[0] for comment in comments if comment[0] is not None]# 使用 jieba 分词def jieba_tokenizer(text):return [word for word in jieba.cut(text) if len(word) >= 2]# 创建 TF-IDF 向量化器vectorizer = TfidfVectorizer(tokenizer=jieba_tokenizer, stop_words=None)  # 可以根据需要添加停用词tfidf_matrix = vectorizer.fit_transform(comments_text)# 获取词汇表feature_names = vectorizer.get_feature_names_out()# 计算每个词的 TF-IDF 值tfidf_sum = tfidf_matrix.sum(axis=0).A1  # 将稀疏矩阵转换为数组tfidf_dict = dict(zip(feature_names, tfidf_sum))# 按 TF-IDF 值排序,提取前 100 个重要词sorted_tfidf = sorted(tfidf_dict.items(), key=lambda x: x[1], reverse=True)[:100]# TF-IDF 值 取整了top_100_words = [{"name": word, "value": int(score)} for word, score in sorted_tfidf]# print(top_100_words)return make_response(code=0, data=top_100_words)except Exception as e:return make_response(code=1, message=str(e))

3 效果

3.1 东京景区评论词云

在这里插入图片描述

3.2 可以搜索选择其他城市

在这里插入图片描述

3.3 切换城市,例如名古屋

在这里插入图片描述

4 补充TF-IDF介绍

TF-IDF(Term Frequency-Inverse Document Frequency)是一种用于信息检索和文本挖掘的权重计算方法。 它旨在评估一个词在一篇文档中的重要性,具体而言:

1. **词频(Term Frequency, TF)**:表示一个词在文档中出现的频率。频率越高,表示该词对文档的贡献越大。

2. **逆文档频率(Inverse Document Frequency, IDF)**:表示一个词在所有文档中的稀有程度。IDF 值通过总文档数除以包含该词的文档数,然后取对数来计算。# - 公式为 IDF(w) = log(总文档数 / (包含词 w 的文档数 + 1))# - 一个常见的词(如“的”、“是”)在许多文档中出现,IDF 值较低,表示它的区分能力弱。#

3. **TF-IDF 值**:通过将词频和逆文档频率相乘得到。TF-IDF 值高的词在特定文档中重要性较高,且在其他文档中较少出现。## 在文本分析中,TF-IDF 常用于特征提取,以帮助识别关键词和主题。

这篇关于vue 精选评论词云 集成echarts-wordcloud TF-IDF算法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108415

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript