3D词云图

工具库

  • tagcanvas.min.js

  • vue3(框架其实无所谓,都可以)

实现

<script setup>
import { onMounted, ref } from 'vue';
import './tagcanvas.min.js';const updateFlag = ref(false);// 词云图初始化
const initWordCloud = () => {let o = {maxSpeed: 0.02, // 添加最大的运动速度minSpeed: 0.01, // 添加最小的运动速度这样就可以保证一直运动,不会停止textHeight: 14,outlineMethod: 'colour', // tag hover 之后的 轮廓效果fadeIn: 800,outlineColour: '#2463f3',textColour: null,outlineOffset: 0,depth: 0.97,minBrightness: 0.2,wheelZoom: false,reverse: true, // 运动方向与鼠标移动方向相反// shadowBlur: 1,shuffleTags: true,shadowOffset: [1, 1],stretchX: 1.2, // Stretch or compress the cloud horizontally. 水平拉伸词云initial: [0.1, 0.1], // 给词云添加一个初始的运动方向textFont: null, // 字体设置为 null 就会继承 每个 tag的a 标签的字体weight: false, // weight 打开,就可以根据默认的字体的大小作为权重,对tag 的样式进行调整weightMode: 'size', // 样式调整的方式weightSize: 0.5, // 调整 tag 字体的大小,加个 权重};try {// 如果不是更新,说明是第一次渲染,就启动 tagcanvas, 否则就代表更新if (!updateFlag.value) {window.TagCanvas.Start('world-cloud-canvas', 'weightTags', o);updateFlag.value = true;} else {window.TagCanvas.Update('world-cloud-canvas');}} catch (e) {console.error(e);}
};const createTagListDom = (res) => {let fragment = new DocumentFragment();for (let i = 0; i < res.length; i++) {let a = document.createElement('a');// 字符串长度大于10就要换行if (res[i].word.length > 10) {let charArr = res[i].word.split('');charArr.splice(10, 0, '<br>');res[i].word = charArr.join('');}a.innerHTML = res[i].word;a.href = 'javascript:void(0)';// 如果是要加重展示就 设置属性为 huge 或large, 否则就设置属性为 medium 或smallif (res[i].isActive) {// 设置a标签颜色为红色a.style.color = '#2463f3';a.style.fontSize = '28px';} else {a.style.color = '#66666690';a.style.fontSize = '14px';}fragment.append(a);}// 更新 tagContainer中的 tag元素let tagsContainer = document.querySelector('#weightTags');tagsContainer.innerHTML = '';tagsContainer.append(fragment);initWordCloud();
};onMounted(() => {createTagListDom([{id: 1,word: 'JavaScript',isActive: true,},{id: 2,word: 'Vue.js',isActive: true,},{id: 3,word: 'React.js',isActive: false,},{id: 4,word: 'Node.js',isActive: false,},{id: 5,word: 'TypeScript',isActive: false,},{id: 6,word: 'HTML',isActive: false,},{id: 7,word: 'CSS',isActive: false,},{id: 8,word: 'Sass',isActive: false,},{id: 9,word: 'Less',isActive: false,},{id: 10,word: 'Webpack',isActive: false,},{id: 11,word: 'Babel',isActive: false,},{id: 12,word: 'Gulp',isActive: false,},{id: 13,word: 'Grunt',isActive: false,},{id: 14,word: 'NPM',isActive: false,},{id: 15,word: 'Yarn',isActive: false,},{id: 16,word: 'Git',isActive: false,},{id: 17,word: 'GitHub',isActive: false,},{id: 18,word: 'Jest',isActive: false,},{id: 19,word: 'Mocha',isActive: false,},{id: 20,word: 'Enzyme',isActive: false,},]);
});
</script><template><div class="w-386px"><div class="h-306px w-full"><canvas id="world-cloud-canvas" width="386" height="306" style="width: 100%; max-width: 386px"> </canvas></div><div id="weightTags" class="hidden"></div></div>
</template>

效果

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/661230.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ快速实战

目录 什么是消息队列&#xff1f; 消息队列的优势 应用解耦 异步提速 削峰填谷 总结 主流MQ产品特点比较 Rabbitmq快速上手 创建用户admin Exchange和Queue Connection和Channel RabbitMQ中的核心概念总结 什么是消息队列&#xff1f; MQ全称Message Queue&#xf…

Python 开发学习目录

Python 开发教程的概述&#xff1a; 安装 Python&#xff1a;首先&#xff0c;你需要在你的计算机上安装 Python。你可以从 Python 的官方网站上下载并安装 Python。 学习基础语法&#xff1a;学习 Python 的基础语法&#xff0c;包括变量、数据类型、控制结构、函数等。 学习…

关于mysql 条线添加 子查询 包含groupby 导致问题

直接简约明确说明一下这个问题&#xff0c;发生这个问题我也很懵逼。然后各种怀疑自己&#xff0c;最终我猜测了一下可能是这个问题&#xff0c;结果直接再子查询中有嵌套了一个括号解决此问题 之前写的sql 由于公司安全问题不展示&#xff0c;写个伪sql代表一下 selectid from…

Redis - 多集群数据源配置

目录 前言依赖yml配置redis多集群数据源配置类思考 redis工具类 前言 工作时有一个项目配置了多个redis数据源&#xff0c;使用时出现了指定了使用副数据源&#xff0c;数据却依然使用了主数据源的情况。经过排查&#xff0c;发现配置流程较为繁琐易错&#xff0c;此处做一个记…

Spring5深入浅出篇:Spring中ioc(控制反转)与DI(依赖注入)

Spring5深入浅出篇:Spring中ioc(控制反转)与DI(依赖注入) 反转(转移)控制(IOC Inverse of Control) 控制&#xff1a;对于成员变量赋值的控制权 反转控制&#xff1a;把对于成员变量赋值的控制权&#xff0c;从代码中反转(转移)到Spring⼯⼚和配置⽂件中完成好处&#xff1a;…

七、并发工具(上)

一、自定义线程池 1&#xff09;背景&#xff1a; 在 QPS 量比较高的情况下&#xff0c;我们不可能说所有的访问都创建一个线程执行&#xff0c;这会导致内存占用过高&#xff0c;甚至有可能出现 out of memory另外也要考虑 cpu 核数&#xff0c;如果请求超过了cpu核数&#…

【bitonicSort学习】

bitonicSort学习 什么是Bitonic Sort核心 什么是Bitonic Sort https://zhuanlan.zhihu.com/p/53963918 这个是用来并行排序的一个操作 之前学过一些CPU排序&#xff0c;快排 冒泡 归并啥的&#xff0c;有一些能转成并行&#xff0c;有一些不适合 像快排这种二分策略就可以考虑…

2024美赛数学建模D题思路源码

比赛当天第一时间更新&#xff01; 赛题目的 赛题目的&#xff1a; 问题描述&#xff1a; 解题的关键&#xff1a; 问题一. 问题分析 问题解答 问题二. 问题分析 问题解答 问题三. 问题分析 问题解答 问题四. 问题分析 问题解答 问题五. 问题分析 问题解答

Vue3的自定义指令怎么迁移到nuxt3

一、找到Vue3中指令的源码 const DISTANCE 100; // 距离 const ANIMATIONTIME 500; // 500毫秒 let distance: number | null null,animationtime: number | null null; const map new WeakMap(); const ob new IntersectionObserver((entries) > {for (const entrie…

草图导入3d后模型贴材质的步骤?---模大狮模型网

3D模型在导入草图大师后出现混乱可能有多种原因&#xff0c;以下是一些可能的原因和解决方法&#xff1a; 模型尺寸问题&#xff1a;如果3D模型的尺寸在导入草图大师时与画布尺寸不匹配&#xff0c;可能导致模型混乱。解决方法是在3D建模软件中调整模型的尺寸&#xff0c;使其适…

深入理解 Java 变量类型、声明及应用

Java 变量 变量是用于存储数据值的容器。在 Java 中&#xff0c;有不同类型的变量&#xff0c;例如&#xff1a; String - 存储文本&#xff0c;例如 "你好"。字符串值用双引号引起来。int - 存储整数&#xff08;全数字&#xff09;&#xff0c;没有小数&#xff…

华为手表开发:WATCH 和GT系列,2.生成密钥和证书请求文件,生成签名和配置签名

华为手表开发:WATCH 3 Pro(2)生成密钥和证书请求文件,生成签名和配置签名 初环境与设备生成密钥生成签名初 希望能写一些简单的教程和案例分享给需要的人 鸿蒙可穿戴开发 环境与设备 系统:window 设备:HUAWEI WATCH 3 Pro 开发工具:DevEco Studio 3.1.0.100 外包开发…

FreeRTOS使用计数信号量进行任务同步与资源管理

FreeRTOS使用计数信号量进行任务同步与资源管理 介绍 在多任务系统中&#xff0c;任务之间的同步和对共享资源的管理是非常重要的。FreeRTOS 提供了丰富的同步机制&#xff0c;其中计数信号量是一种强大的工具&#xff0c;用于实现任务之间的同步和对资源的访问控制。 什么是…

figure方法详解之清除图形内容

figure方法详解之清除图形内容 一 clf():二 clear():三 clear()方法和clf()方法的区别&#xff1a; 前言 Hello 大家好&#xff01;我是甜美的江。 在数据可视化中&#xff0c;Matplotlib 是一个功能强大且广泛使用的库&#xff0c;它提供了各种方法来创建高质量的图形。在 Mat…

SpringBoot 多模块开发 笔记(一)

多模块开发 简易版 dao 层 也可以说是 Mapper 层web 层 将 controller 放在这一层 还有 统一返回类型 和 自定义异常 也在放在这里 启动类也放在这里model 层 也就是 数据对象 比如常见的 User 类server 层 业务逻辑层 或者说 service 层更好 创建步骤 创建一个正常的 Sprin…

unity 拖入文件 窗口大小

目录 unity 拖入文件插件 设置窗口大小 unity 拖入文件插件 GitHub - Bunny83/UnityWindowsFileDrag-Drop: Adds file drag and drop support for Unity standalong builds on windows. 设置窗口大小 file build

Iceberg从入门到精通系列之二十一:Spark集成Iceberg

Iceberg从入门到精通系列之二十一&#xff1a;Spark集成Iceberg 一、在 Spark 3 中使用 Iceberg二、添加目录三、创建表四、写五、读六、Catalogs七、目录配置八、使用目录九、替换会话目录十、使用目录特定的 Hadoop 配置值十一、加载自定义目录十二、SQL 扩展十三、运行时配置…

python--整体的模块

1、python程序的架构&#xff1a;是将一个程序分割为源代码文件的集合以及将这些部分连接在一起的方法2、在python中&#xff0c;一个py文件就是一个模块&#xff0c;多个模块组成一个包。3、python的模块的执行环境&#xff1a;一个模块包含了变量、函数、类以及其他的模块&am…

电子电器架构——车载网关转发buffer心得汇总

电子电器架构——车载网关转发buffer心得汇总 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力…

Debezium系列之:字段schema详解

Debezium系列之:字段schema详解 一、字段schema二、字段schema参数解释一、字段schema {"type":"bytes","optional":true,"name":"org.apache.kafka.connect.data.Decimal","version":1,"parameters"…