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

相关文章

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Java时间轮调度算法的代码实现

《Java时间轮调度算法的代码实现》时间轮是一种高效的定时调度算法,主要用于管理延时任务或周期性任务,它通过一个环形数组(时间轮)和指针来实现,将大量定时任务分摊到固定的时间槽中,极大地降低了时间复杂... 目录1、简述2、时间轮的原理3. 时间轮的实现步骤3.1 定义时间槽3.2 定义时间轮3.3 使用时

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

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

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

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js