大屏显示之动态词云组件

先上效果图：

<template><div class="wordCloud" ref="wordCloudRef"></div>
</template><script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue'
const props = defineProps({wordCloud:{type:Array,required:true},colorList:{type:Array,default: ['#a18cd1', '#fad0c4', '#ff8177','#fecfef', '#fda085', '#f5576c','#330867', '#30cfd0', '#38f9d7']}
})
// 容器节点ref
let wordCloudRef = ref(null)
// 容器节点的边界坐标
let ContainerSize = reactive({})
// 词云Dom节点
let wordDomList = ref([])
// 定义定时器，组件卸载时销毁
let timer = ref(null)// 初始化词云DOM位置
function initWordPos () {// 计算每个词的真实位置和容器的位置wordDomList.forEach((value) => {value.local.realPos = {minx: value.offsetLeft,maxx: value.offsetLeft + value.offsetWidth,miny: value.offsetTop,maxy: value.offsetTop + value.offsetHeight};});ContainerSize = getContainerSize();
}
// 初始化词云DOM节点
function dealSpan () {const wordArr = [];props.wordCloud.forEach((value) => {// 根据词云数量生成span数量设置字体颜色和大小const spanDom = document.createElement('span');spanDom.style.position = 'relative';spanDom.style.display = 'inline-block';spanDom.style.color = randomColor();spanDom.style.fontSize = randomNumber(20, 40) + 'px';spanDom.innerHTML = value;spanDom.local = {position: {// 位置x: 0,y: 0},direction: {// 方向 正数往右 负数往左x: 1,y: 1},velocity: {// 每次位移初速度x: -0.5 + Math.random(),y: -0.5 + Math.random()},};wordCloudRef.value.appendChild(spanDom);wordArr.push(spanDom);});wordDomList = wordArr;
}
// 动态词云
function wordFly () {wordDomList.forEach((value) => {// 设置运动方向 大于边界或者小于边界的时候换方向if (value.local.realPos.minx + value.local.position.x < ContainerSize.leftPos.x || value.local.realPos.maxx + value.local.position.x > ContainerSize.rightPos.x) value.local.direction.x = -value.local.direction.x;if (value.local.realPos.miny + value.local.position.y < ContainerSize.leftPos.y || value.local.realPos.maxy + value.local.position.y > ContainerSize.rightPos.y) value.local.direction.y = -value.local.direction.y;value.local.position.x += value.local.velocity.x * value.local.direction.x;value.local.position.y += value.local.velocity.y * value.local.direction.y;// 给每个词云加动画过渡value.style.transform = 'translateX(' + value.local.position.x + 'px) translateY(' + value.local.position.y + 'px)';});timer = window.requestAnimationFrame(wordFly)
}
// 获取容器位置
function getContainerSize () {// 判断容器大小控制词云位置const el  = wordCloudRef.value;return {leftPos: {// 容器左侧的位置和顶部位置x: el.offsetLeft,y: el.offsetTop},rightPos: {// 容器右侧的位置和底部位置x: el.offsetLeft + el.offsetWidth,y: el.offsetTop + el.offsetHeight}};
}
// 获得一个包含最小值和最大值之间的随机数。
function randomNumber (lowerInteger, upperInteger) {const choices = upperInteger - lowerInteger + 1;return Math.floor(Math.random() * choices + lowerInteger);
}// 获取随机颜色
function randomColor () {var colorIndex = Math.floor(props.colorList.length * Math.random());return props.colorList[colorIndex];
}onMounted(() => {dealSpan()initWordPos()timer = window.requestAnimationFrame(wordFly)
})
onUnmounted(() => {// 组件销毁，关闭定时执行cancelAnimationFrame(timer);
})
</script><style lang="scss" scoped>.wordCloud{width: 400px;height: 400px;border: 1px darkcyan dashed;}
</style>

组件调用


<script setup>
// 词云数据
let wordCloud =reactive([ '闭月羞花','沉鱼落雁','出水芙蓉','明眸皓齿','美如冠玉','倾国倾城','国色天香','鹤发童颜','眉清目秀','张牙舞爪','愁眉苦脸','冰清玉洁','雍容华贵','文质彬彬','威风凛凛',,'心慈面善','弱不禁风','和蔼可亲','老态龙钟','虎背熊腰','如花似玉','容光焕发','落落大方','骨瘦如柴','大腹便便','面黄肌瘦','其貌不扬','蓬头垢面'])
</script>
<template><WordCloud :wordCloud="wordCloud" ></WordCloud>
</template>

小推一个好用的录制gif图的工具—>LICEcap

参考文章：https://juejin.cn/post/7000300247947673630

大屏显示之动态词云组件相关推荐

漏刻有时数据可视化大屏数据可视化动态模拟演示与自动轮播
在数据可视化开发的过程中,存在着两种动画效果.一种是KPI指标的模拟演示动画数字滚动累加效果,一种是Echarts图表自动轮播实现自动演示的动画效果. 一.KPI指标的模拟演示动画数字滚动累加效果实 ...
前端做大屏显示，缩放比，分辨率怎样适配？
我们在做大屏的时候经常在开发环境开发的时候显示很完美,但是到了客户电脑就花样百出,出去浏览器对CSS3和js语言新特性的兼容问题,其实大多是因为网页的缩放比,或者用户的高分屏的一些设置问题,如图通常 ...
智慧工地指挥室大屏显示系统应该如何建设？
大屏显示系统是一个把复杂.抽象的大型数据,通过构建图形.提炼重点指标等易于理解的形式,加以视觉效果展示出的方式叫做数据可视化,用在数据统计.数据备份中心管理这些工作上.一方面利用酷炫的效果让人眼前一亮 ...
思迈特软件Smartbi：数据大屏显示实时数据解决方案
大数据时代 ,数据是有价值的"黄金 ",但是数据是不会告诉你 ,那里存在价值 ,我们可以通过大屏显示来直观的了解数据中隐含的价值 . 大屏显示是什么?顾名 ...
迪威视讯获中国大屏显示领域顶级大奖
2016年1月13日,迪威视讯宣布,在由中国投影网.数字标牌网.音响网联合主办的"2015视听行业高峰论坛"暨第十届中国大屏幕投影行业年度评选活动中,迪威视讯荣获"201 ...
VMVare中CentOS图形化界面大屏显示的方法（调节屏幕分辨率）
1.问题阐述在虚拟机中安装CentOS系统,进入图形化界面后发现显示的界面很小,看起来很不方便,因此下面通过调节屏幕的分辨率来将图形化界面大屏显示. 2.操作步骤通常来说,CentOS系统内的操作 ...
安卓电视大屏显示UI
基于android系统的电视大屏显示,使用语言为c#语言Xamarin.forms 1.表格可以自动滚动 2.实现饼状图.折线图.条形图 3.表格的自动滚动 https://download.csdn ...
BI报表之电网大屏显示制作
原文链接:http://c.raqsoft.com.cn/article/1536634816208?r=alice 2018 年已经过半,各省又开始比考试成绩了,考试科目就叫 GDP,排在前面的自然 ...
python爬取好友微信地区_python爬取微信信息--显示性别/地域/词云（附代码）
看到一篇有意思的博客利用微信开放的接口itchat 可以获取登录的微信好友信息并且利用图像工具显示分析结果非常的有意思记录下实现过程并提供可执行代码首先要 import itchat 库 ...

大屏显示之动态词云组件

组件调用

大屏显示之动态词云组件相关推荐

最新文章

热门文章