vue简单实现词云图组件

2024-04-28 20:08
文章标签 javascript 简单 实现 组件 vue frontend 云图

本文主要是介绍vue简单实现词云图组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

说在前面

JavaScript也有许多可以用来生成词云图的库，但我自己其实都没有使用过，之前使用python的时候倒是用过python的wordcloud库，wordcloud库配合jieba库就可以很好的满足词频统计的需求，但在JavaScript这边我还没有了解很多词频统计这块的相关知识，在网上搜索了一番好像都没有搜索到有有关词频统计的相关库，而在词云生成这一方面的相关库倒是发现有不少，如：js2wordcloud、wordcloud2 等等……这些库都很好地实现了词云图片的展示，现在我也尝试着简单封装一个自己使用的简洁版词云图

思路

实现效果

词云图需要实现的效果大致可以总结如下：

  • 1、根据词频设置不同的字体大小
  • 2、给单词渲染不同的随机颜色
  • 3、随机排布单词的位置

在这里插入图片描述

关键代码
1、根据词频设置不同的字体大小

maxSize与minSize设置最大字体和最小字体的比例，并不是实际的字体大小，字体大小的计算方式如下：

  • 1、计算最大字体和最小字体的中位数最为基准（该基准的字体大小即为this.baseSize,其余均在此基准上下浮动）
const baseSize = (this.maxSize + this.minSize) / 2;
  • 2、通过词频比例计算出字体的大小的浮动值
const addSize =((this.maxSize - this.minSize) * (freq - this.minFreq)) /(this.maxFreq - this.minFreq);
  • 3、计算出具体的字体大小
    (字体最小值 + 浮动值) / 基准值 = 实际字体比例
    实际字体比例 * 实际设置基准值 = 实际字体大小
((this.minSize + addSize) / baseSize) * this.baseSize + "rem";
  • 4、完整代码如下
//通过词频计算字体大小
getSize(freq) {const baseSize = (this.maxSize + this.minSize) / 2;const addSize =((this.maxSize - this.minSize) * (freq - this.minFreq)) /(this.maxFreq - this.minFreq);return (((this.minSize + addSize) / baseSize) * this.baseSize + "rem");
},
2、给单词渲染不同的随机颜色

颜色的rgb值为3个0~255的数字组成，我们只要随机生成3个0~255范围的数字组合即可，具体代码如下：

//随机获取颜色
getRandomColor() {let res = "rgb(";res += this.getRandomNum(0, 255) + ",";res += this.getRandomNum(0, 255) + ",";res += this.getRandomNum(0, 255) + ")";return res;
},
//获取随机数
getRandomNum(minN, maxN) {return Math.floor(Math.random() * (maxN - minN + 1) + minN);
},
3、随机排布单词的位置

对于单词位置排布这边有两个实现方案，但两个方案各有好处与缺点。

  • 1、绝对布局设置单词位置
    在这里插入图片描述

优点：单词位置随机性高
缺点：需要处理单词位置重叠问题（选择了方案二，所以目前还没有去解决这个问题）
实现思路：
（1）在范围内随机获取坐标

//随机获取坐标
getRandomPoint() {const width = this.width,height = this.height,pointList = this.pointList,showTextList = this.showTextList;const x = this.getRandomNum(0, width - 20),y = this.getRandomNum(0, height - 20);return { x: x, y: y };
},

(2)组合对应样式

//组合样式
getStyle(item, index) {const height = parseFloat(item.size) * 16;const width = parseFloat(item.size) * 20 * item.text.length;let res = "";res += "font-size:" + item.size + ";";res += "position: absolute;";res +="top:" +Math.max(0, Math.min(item.point.y, this.width - width)) +"px;";res +="left:" +Math.max(0, Math.min(item.point.x, this.height - height)) +"px;";res += "color:" + item.color + ";";return res;
},
  • 2、浮动布局设置单词位置

在这里插入图片描述

优点：单词位置不会重叠
缺点：单词位置随机性低
实现思路：
（1）在范围内随机获取坐标

//随机获取坐标
getRandomPoint() {const width = this.width,height = this.height,pointList = this.pointList,showTextList = this.showTextList;const x = this.getRandomNum(0, width - 20),y = this.getRandomNum(0, height - 20);return { x: x, y: y };
},

(2)组合对应样式

//组合样式
getStyle(item, index) {const height = parseFloat(item.size) * 16;const width = parseFloat(item.size) * 20 * item.text.length;let res = "";res += "float: left;";res += "font-size:" + item.size + ";";res += "color:" + item.color + ";";return res;
},
完整代码

完整代码实现如下：

<template><div><divclass="j-word-cloud":style="'min-height:' + height + 'px;width:' + width + 'px;'"><spanv-for="(item, index) in showTextList":key="index":id="'word-' + index":style="getStyle(item, index)">{{ item.text }}</span></div><div @click="init()">刷新</div></div>
</template><script>
export default {name: "JWordCloud",props: {textList: {type: Array,default: () => {return [{ text: "单词", freq: 10 },{ text: "单词1", freq: 5 },{ text: "单词2", freq: 7 },{ text: "单词3", freq: 2 },{ text: "单词5", freq: 3 },{ text: "单词6", freq: 4 },{ text: "单词7", freq: 5 },{ text: "单词8", freq: 6 },{ text: "单词9", freq: 6 },{ text: "单词10", freq: 8 },{ text: "单词11", freq: 4 },{ text: "单词12", freq: 2 },{ text: "单词13", freq: 4 },{ text: "单词14", freq: 3 },{ text: "单词15", freq: 1 },{ text: "单词16", freq: 5 }];}},width: {type: Number,default: 300},colorList: {type: Array,default: () => []},baseSize: {type: Number,default: 2},maxSize: {type: Number,default: 5},minSize: {type: Number,default: 1},transformDeg: {type: Array,default: () => {return [-45, 45];}}},data() {return {maxFreq: 0,minFreq: 0,showTextList: [],pointList: [],height: 200};},mounted() {this.init();},methods: {init() {this.initData();this.comShowtexList();this.getFourPoints();},//组合样式getStyle(item, index) {const height = parseFloat(item.size) * 16;const width = parseFloat(item.size) * 20 * item.text.length;let res = "";res += "font-size:" + item.size + ";";// res += "position: absolute;";res += "float: left;";// res +=//     "top:" +//     Math.max(0, Math.min(item.point.y, this.width - width)) +//     "px;";// res +=//     "left:" +//     Math.max(0, Math.min(item.point.x, this.height - height)) +//     "px;";res += "color:" + item.color + ";";// res += "transform:rotate(" + item.deg + "deg);";return res;},//计算旋转后的坐标getTransformPoint(x, y, deg) {deg = parseFloat(deg);let rx = (Math.cos(deg * Math.PI) / 180) * x,ry = (Math.sin(deg * Math.PI) / 180) * x;return { tx: x + rx, ty: y + ry };},//随机获取坐标getRandomPoint() {const width = this.width,height = this.height,pointList = this.pointList,showTextList = this.showTextList;const x = this.getRandomNum(0, width - 20),y = this.getRandomNum(0, height - 20);return { x: x, y: y };},//随机获取颜色getRandomColor() {let res = "rgb(";res += this.getRandomNum(0, 255) + ",";res += this.getRandomNum(0, 255) + ",";res += this.getRandomNum(0, 255) + ")";return res;},//随机获取角度getRandomdeg() {let res = "";res += this.getRandomNum(this.transformDeg[0],this.transformDeg[1]);return res;},//获取随机数getRandomNum(minN, maxN) {return Math.floor(Math.random() * (maxN - minN + 1) + minN);},//初始化initData() {const textList = this.textList;let maxF = textList[0].freq,minF = textList[0].freq;textList.map(item => {maxF = Math.max(maxF, item.freq);minF = Math.min(minF, item.freq);});this.maxFreq = maxF;this.minFreq = minF;},//通过词频计算字体大小getSize(freq) {const baseSize = (this.maxSize + this.minSize) / 2;const addSize =((this.maxSize - this.minSize) * (freq - this.minFreq)) /(this.maxFreq - this.minFreq);return (((this.minSize + addSize) / baseSize) * this.baseSize + "rem");},//获取四个顶点坐标getFourPoints() {this.$nextTick(() => {let showTextList = this.showTextList;let newHeight = 0;for (let i = 0; i < showTextList.length; i++) {let id = "word-" + i;let dom = document.getElementById(id);let tl = { x: dom.offsetLeft, y: dom.offsetTop };let tr = {x: dom.offsetLeft + dom.offsetWidth,y: dom.offsetTop};let bl = {x: dom.offsetLeft,y: dom.offsetTop + dom.offsetHeight};let br = {x: dom.offsetLeft + dom.offsetWidth,y: dom.offsetTop};newHeight = Math.max(newHeight, bl.y);showTextList[i].fourPoints = {tl: tl,tr: tr,bl: bl,br: br};}this.height = newHeight;});},//组装显示列表属性数据comShowtexList() {let showTextList = [];this.textList.map(item => {let temp = item;temp.size = this.getSize(item.freq);const point = this.getRandomPoint();const color = this.getRandomColor();const deg = this.getRandomdeg();this.pointList.push(point);temp.point = point;temp.color = color;temp.deg = deg;showTextList.push(temp);});showTextList = showTextList.sort((a, b) => {return 0.5 - Math.random();});this.showTextList = showTextList;}}
};
</script><style lang="scss" scoped>
.j-word-cloud {border: 1px solid black;position: relative;span {transform-origin: 0 0;padding: 0.1rem;margin: 0 auto;}
}
</style>
代码地址

预览（文档）：http://120.79.163.94/JYeontuComponents/#/JWordCloudView

gitee源码：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse

这篇关于vue简单实现词云图组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/944140。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

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

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这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 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

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

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

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

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

hdu2289（简单二分）

虽说是简单二分，但是我还是wa死了  题意：已知圆台的体积，求高度 首先要知道圆台体积怎么求：设上下底的半径分别为r1,r2,高为h,V = PI*(r1*r1+r1*r2+r2*r2)*h/3 然后以h进行二分 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#includ
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2