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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

康拓展开(hash算法中会用到)

康拓展开是一个全排列到一个自然数的双射(也就是某个全排列与某个自然数一一对应) 公式: X=a[n]*(n-1)!+a[n-1]*(n-2)!+...+a[i]*(i-1)!+...+a[1]*0! 其中,a[i]为整数,并且0<=a[i]<i,1<=i<=n。(a[i]在不同应用中的含义不同); 典型应用: 计算当前排列在所有由小到大全排列中的顺序,也就是说求当前排列是第

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

【数据结构】——原来排序算法搞懂这些就行,轻松拿捏

前言:快速排序的实现最重要的是找基准值,下面让我们来了解如何实现找基准值 基准值的注释:在快排的过程中,每一次我们要取一个元素作为枢纽值,以这个数字来将序列划分为两部分。 在此我们采用三数取中法,也就是取左端、中间、右端三个数,然后进行排序,将中间数作为枢纽值。 快速排序实现主框架: //快速排序 void QuickSort(int* arr, int left, int rig

高效录音转文字:2024年四大工具精选!

在快节奏的工作生活中,能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候,一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具! 365在线转文字 直达链接:https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具,它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件,只