日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
日历热力图,月度数据可视化图表,vue组件
先看效果👇
在线体验https://www.guetzjb.cn/calanderViewGraph/
日历图简单划分为近一年时间,开始时间是 上一年的今天
,例如2024/01/01 —— 2025/01/01,跨度刚好一年,依次从上到下看一排真好七个小方格,分别对应着 周日、周一、周二、周三、周四、周五、周六。
PC端、移动端支持良好
方法颜色支持自定义,可根据数据大小规定颜色深度。
实现方式简单易懂~用到element plus和moment,用前请安装到项目
yarn add element-plus moment
# or
npm i element-plus moment
show code
calanderViewGraph.vue
<script setup lang='ts'>
import moment from 'moment'
import 'moment/dist/locale/zh-cn'moment.locale('zh-cn')const props = withDefaults(defineProps<{size: number
}>(), {size: 10
})const ansRes: any = []
const date = new Date()
const today = {year: date.getFullYear(),month: date.getMonth(),day: date.getDate()
}
let endTime = moment(date, 'YYYY/MM/DD').format('L')
let startTime = moment((today.year - 1) + '/' + (today.month + 1) + '/' + today.day, 'YYYY/MM/DD').format('L')
const visibleList = ref<Record<string, boolean>>({})
let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]function isLeapYear(year: number) {return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}function init() {//上一年开始遍历//下标从0开始for (let month = today.month; month <= 12 + today.month; month++) {let year = Math.floor(month / 12); //0->前一年 1->今年let m = month % 12;let remainDaylet weekif (month != today.month && month != 12 + today.month) {remainDay = days[m] + (isLeapYear(today.year - (year == 0 ? 1 : 0)) && m == 1 ? 1 : 0) // 闰年补1week = new Date(today.year - (year == 0 ? 1 : 0) + '/' + (m + 1) + '/1').getDay()} else {if (month == today.month) {remainDay = days[m] - today.day + 1 + (isLeapYear(today.year - (year == 0 ? 1 : 0)) && m == 1 ? 1 : 0) // 例如 1/1 ~ 1/2 日期相差2天,相减+1week = new Date(today.year - (year == 0 ? 1 : 0) + '/' + (m + 1) + '/' + today.day).getDay()} else {remainDay = today.day + (isLeapYear(today.year - (year == 0 ? 1 : 0)) && m == 1 ? 1 : 0)week = new Date(today.year - (year == 0 ? 1 : 0) + '/' + (m + 1) + '/1').getDay()}}ansRes.push({year,month: m,remainDay,week,rev: month == today.month // 第一个日期必须反转 例如2024/1/20 剩余11天,应该显示2024/1/20 ~ 2024/1/31})}
}const viewsList = ref<any>({totalCnt: 0,views: {// '2025/01/20': 10 //格式 —— (key:日期,value:数量)},colors: {// '2025/01/20': '#fff000' //格式 —— (key:日期,value:色值)}
})// 自定义颜色
const colorArr = ["#E0F8E0", "#C6E0C6", "#AEE6AE", "#96EA96", "#7EF07E", "#66F566", "#4EF94E", "#36FD36", "#1EFF1E", "#00CC00"]
function getColorFunc(value: number): string {let i = 0while (value > 10 && i < colorArr.length) {value -= 10i += 1}return colorArr[i]
}function generateData() {let startTimeStamp = new Date(startTime).getTime()let endTimeStamp = new Date(endTime).getTime()// 随机生成365个数据for (let i = 0; i < 365; i++) {let randomTimeStamp: number = (endTimeStamp - Math.random() * (endTimeStamp - startTimeStamp)) // 随机减一个随机时间戳,相当于在今天的时间戳基础上减let dateStr: string = moment(randomTimeStamp).format('YYYY/MM/DD')if (!viewsList.value.views[dateStr]) {viewsList.value.views[dateStr] = 0}let curCnt = Math.random() * 100 | 0 // |0去除小数点 viewsList.value.views[dateStr] += curCntviewsList.value.totalCnt += curCntviewsList.value.colors[dateStr] = getColorFunc(viewsList.value.views[dateStr])}
}const formatDate = (year: number, month: number, day: number) => {return moment(today.year + (year == 0 ? -1 : 0) + '/' + (month + 1) + '/' + (day + 1), 'YYYY/MM/DD').format('L')
}init()
onMounted(() => {generateData()
})</script><template><div class="calander_box"><p class="view_title">近一年共浏览<span style="font-weight: bold;padding: 0 5px;">{{ viewsList?.totalCnt != null ?viewsList?.totalCnt : '...' }}</span>次</p><el-scrollbar><div class="mobile_wrap"><div class="calander_view_g_wrap"><div class="views_wrap" v-for="month in ansRes" v-show="month.remainDay > 0"><!-- 一排 7个 加边距(20px) --><div class="views_month" :style="{ height: props.size * 7 + 20 + 'px' }"><!-- 伪装的格子 --><div class="views_day" :style="{width: props.size + 'px',height: props.size + 'px'}" v-for="_offset in month.week" style="background: transparent;cursor: auto;"></div><!-- 真正显示的格子 --><div v-for="(_day, index) in month.remainDay"><el-tooltip effect="dark" :visible="visibleList[formatDate(month.year, month.month, index)]":content="`${formatDate(month.year, month.month, !month.rev ? index : (days[month.month] - (month.remainDay - index)))} ${viewsList?.views[formatDate(month.year, month.month, index)] || 0}次浏览`"placement="top-start"><div class="views_day" @mouseenter="visibleList[formatDate(month.year, month.month, index)] = true"@mouseleave="visibleList[formatDate(month.year, month.month, index)] = false" :style="{background: viewsList?.colors[formatDate(month.year, month.month, index)],width: props.size + 'px',height: props.size + 'px'}"></div></el-tooltip></div></div><p style="color: #a2a2a2;">{{ month.month + 1 + '月' }}</p></div></div></div></el-scrollbar></div>
</template><style lang='scss' scoped>
.calander_box {width: 100%;padding: 20px;.view_title {font-size: 18px;padding-left: 10px;margin-bottom: 20px;}.mobile_wrap {width: fit-content;@media screen and (max-width:480px) {width: 800px;white-space: nowrap;overflow-anchor: auto;}.calander_view_g_wrap {display: flex;justify-content: space-between;.views_wrap {width: 100%;margin-right: 8px;margin-left: 8px;p {text-align: center;margin-top: 10px;}.views_month {width: calc(100% / 12);height: 90px;display: flex;flex-direction: column;flex-wrap: wrap;@media screen and (max-width:1200px) {height: 50px;}.views_day {margin: 0 2px 2px 0;border-radius: 2px;background: #F7F7F8;cursor: pointer;@media screen and (max-width:1200px) {width: 5px;height: 5px;}}}}}}}
</style>
使用方法:
传入size表示方格的宽度和高度,
如果不想要方形,可以自己改样式实现(注意调整外部div高度,必须一排七个,否则周(日、一……六)的顺序会错乱)
<calanderViewGraph :size="10"/>
相关文章:
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
日历热力图,月度数据可视化图表,vue组件 先看效果👇 在线体验https://www.guetzjb.cn/calanderViewGraph/ 日历图简单划分为近一年时间,开始时间是 上一年的今天,例如2024/01/01 —— 2025/01/01,跨度刚…...
ue5 制作,播放,停止动画蒙太奇
右键,动画蒙太奇 新建插槽 把默认插槽选择为,自己新建的插槽 然后拖一个动画进去 input换成玩家0 就可以接收键盘事件 pawn 自动控制玩家换成玩家0 找到动画蓝图 把它化成我们那边蒙太奇里面的槽 第三步:第三人称角色蓝图 按下F…...
Genetic Prompt Search via Exploiting Language Model Probabilities
题目 利用语言模型概率的遗传提示搜索 论文地址:https://www.ijcai.org/proceedings/2023/0588.pdf 项目地址:https://github.com/zjjhit/gap3 摘要 针对大规模预训练语言模型(PLMs)的即时调优已经显示出显著的潜力,尤其是在诸如fewshot学习…...
mysql之表的外键约束
MySQL表的外键约束详细介绍及代码示例 外键约束是数据库中用于维护数据完整性和一致性的重要机制。它确保一个表中的数据与另一个表中的数据相关联,防止无效的数据引用。本文将详细介绍了外键约束的各个方面,并通过具体的代码示例进行演示。 1. 外键约束…...
linux环境变量配置文件区别 /etc/profile和~/.bash_profile
在 Linux 系统中,环境变量可以定义用户会话的行为,而这些变量的加载和配置通常涉及多个文件,如 ~/.bash_profile 和 /etc/profile。这些文件的作用和加载时机各有不同。以下是对它们的详细区别和用途的说明: 文章目录 1. 环境变量…...
C++----STL(vector)
vector的介绍 vector的文档介绍:cplusplus.com/reference/vector/vector/ 1.基本概念 简单来说,vector是表示可以改变大小的数组的顺序容器。使用连续的存储位置来存储元素,因此可以通过常规指针的偏移量来高效访问。 2.内部机制 vector…...
springboot项目适配电科金仓数据库
又接到了信创适配任务,话不多说,直接开始干货 首先安装一下电科金仓的数据库,直接官网下,对应的授权也下90天的专业版,客户肯定是整个采购,365天的开发版本连接数有限制 KES相关下载地址:电科金仓-成为世界卓越的数据库产品与服务提供商 安装就不做赘述了 启动数据库…...
C# 动态创建Label和ComboBox控件并修改Text获取Text
背景:在做项目的时候可能需要根据一定数量创建某些控件并修改其属性,本文以控件label、ConboBox控件进行动态创建。 程序运行前后的的Form动态图 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; …...
HP 笔记本重新安装 Windows 11 无法启动
相信你搜到这篇文章的时候, 你已经看过了网上各种关于如何在 HP 笔记本电脑上安装 Windows 11 的文章。你遇到的问题肯定不是网上那些文章讲的那么简单的问题。你遇到的一定不是你不懂如何安装 Windows,不懂如何对硬盘分区等等小白问题。 问题描述 问…...
BUUCTF_Web( XSS COURSE 1)xss
XSS即跨站脚本攻击(Cross-Site Scripting),是一种常见的网络安全漏洞. 定义 XSS攻击指攻击者在目标网站中注入恶意脚本,当用户访问该网站时,浏览器会执行这些恶意脚本,从而导致用户信息泄露、被控制等安全问…...
STM32补充——IAP
0 前置知识: FLASH相关内容:前往STM32补充——FLASH STM32三种烧录方式(看看就行): 1.ISP:In System Programming(在系统编程) 执行芯片厂商的 Bootloader 程序进入 ISP 模式&…...
APP加固的那些事
APP加固是保护APP代码逻辑的重要手段,通过隐藏、混淆、加密等操作提高软件的逆向成本,降低被破解的几率,保障开发者和用户利益。本文将介绍APP加固常见失败原因及解决方法,以及处理安装出现问题的情况和资源文件加固策略选择。 引…...
数据分析 基础定义
一、大数据的定义 数据分析是基于商业等目的,有目的的进行收集、整理、加工和分析数据,提炼有价值信息的过程。 大数据分析即针对海量的、多样化的数据集合的分析 大数据分析是一种利用大规模数据集进行分析和挖掘知识的方法。随着互联网、社交媒体、移动…...
PyTorch广告点击率预测(CTR)利用深度学习提升广告效果
目录 广告点击率预测问题数据集结构广告点击率预测模型的构建1. 数据集准备2. 构建数据加载器3. 构建深度学习模型4. 训练与评估 总结 广告点击率预测(CTR,Click-Through Rate Prediction)是在线广告领域中的重要任务,它帮助广告平…...
嵌入式入门(二)-STM32CubeMX项目开发
使用STM32CubeMX创建项目 本文使用STM32CubeMX模拟器创建一个嵌入式项目的详细流程。 New Project 根据型号搜索 搜索型号: STM32F103C8T6 启动项目 选择STM32F103C8T6后点击 Start Project 配置时钟 切换到 Clock Configuration 修改HCLK -->72MHZ 修改Input fr…...
MATLAB绘图时线段颜色、数据点形状与颜色等设置,介绍
MATLAB在绘图时,设置线段颜色和数据点的形状与颜色是提高图形可读性与美观性的重要手段。本文将详细介绍如何在 MATLAB 中设置这些属性。 文章目录 线段颜色设置单字母颜色表示法RGB 值表示法 数据点的形状与颜色设置设置数据点颜色和形状示例代码 运行结果小结 线段…...
Java菜鸟养成计划(java基础)--java运算符
java中的运算符 1、java中的运算符1.1 、 、-、 * 、/ 、 %1.2 、、-、 *、/、%1.3 、、--【自增\自减运算符】1.4、>、 <、 > 、< 、 、! 、! 1.5、&&、||、|、&1.6、&、|、~、^1.7、>> 、 <<、>>>位运算1.8、?:三目运算符…...
学习笔记——动态规划
递推 1.递推和动态规划有什么关系? 递推问题包括动态规划,动态规划一定是递推,递推不一定是动态规划。 动态规划是一种决策性的问题,是在状态中做最优决策的一种特殊递推算法,通常的问法包括求最大最小值等ÿ…...
蓝桥杯备考:红黑树与map和set
搜索二叉树 我们三种树只了解原理,不写代码,因为我们竞赛不做要求,只是为了使用set和map做铺垫 原理记不住,没关系,我们只要会各种操作的时间复杂度 二叉搜索树的定义 1若左子树非空,左子树所有结点的权…...
第二届生成式人工智能与信息安全国际学术会议(GAIIS 2025)
在线投稿: 学术会议-学术交流征稿-学术会议在线-艾思科蓝 【征文主题】(包括但不限于) 深度学习 自然语言处理 算法应用 计算机视觉 视觉识别 模式识别 强化学习 生成对抗网络 生成建模技术 语言预训练 视觉预训练 联合预训练…...
后端面试题分享第一弹(状态码、进程线程、TCPUDP)
后端面试题分享第一弹 1. 如何查看状态码,状态码含义 在Web开发和调试过程中,HTTP状态码是了解请求处理情况的重要工具。 查看状态码的步骤 打开开发者工具: 在大多数浏览器中,您可以通过按下 F12 键或右键单击页面并选择“检查…...
Python 常用运维模块之OS模块篇
Python 常用运维模块之OS模块篇 OS 模块获取当前工作目录更改当前工作目录返回当前目录路径返回上一级目录路径递归生成目录路径删除目录创建目录删除目录列出特定目录下文件和子目录删除某个特定文件重命名某个文件获取某个文件/目录的信息输出目录路径分隔符输出文件行终止符…...
前沿技术趋势洞察:2024年技术的崭新篇章与未来走向!
引言 时光飞逝,2024年已经来临,回顾过去一年,科技的迅猛进步简直让人目不暇接。 在人工智能(AI)越来越强大的今天,我们不再停留在幻想阶段,量子计算的雏形开始展示它的无穷潜力,Web …...
HTML语言的数据结构
HTML语言的数据结构 引言 HTML(超文本标记语言)是构建网页的标准语言。尽管HTML本身不是一种编程语言,它为我们提供了一种结构化的信息表示方法,使得网页内容能够有序地展现给用户。HTML的核心在于其标记(标签&#…...
怎么创建一个能在线测试php的html5网页?
代码示例: 一、搭建服务器环境 首先,你需要在服务器上搭建 PHP 运行环境。如果你使用的是 Linux 服务器,可以使用 Apache 或 Nginx 作为 Web 服务器,并安装 PHP 解释器。对于 Windows 服务器,可以使用 WAMP(…...
docker安装elk6.7.1-搜集nginx-json日志
docker安装elk6.7.1-搜集nginx-json日志 如果对运维课程感兴趣,可以在b站上、A站或csdn上搜索我的账号: 运维实战课程,可以关注我,学习更多免费的运维实战技术视频 0.规划 192.168.171.130 nginxfilebeat 192.168.171.131 …...
常见的社交媒体平台有哪些?
社交媒体平台有哪些?在跨境电商和全球营销的过程中,海外社交媒体平台是提高品牌曝光率的重要工具。为了有效管理多个平台的账户,并防止账户之间的关联问题,OKBrow指纹指纹浏览器凭借其强大的多账户管理、防关联技术和隐私保护功能…...
nslookup在内网渗透的使用
1. 什么是 nslookup? nslookup(Name Server Lookup)是一个用于查询 DNS(域名系统)记录的命令行工具。通过该工具,用户可以查询域名的解析结果,例如获取某个域名对应的 IP 地址或查找域名的相关记…...
Linux:修改用户名
Linux:修改用户名 0. 注意事项1.创建并切到临时用户tempuser2.更改用户名3.删除临时用户tempuser 更多内容:XiaoJ的知识星球 在Ubuntu系统中,更改用户名。 0. 注意事项 备份重要数据:在更改用户名之前,建议备份重要数…...
IP协议特性
在网络层中,最重要的协议就是IP协议,IP协议也有两个特性,即地址管理和路由选择。 1、地址管理 由于IPv4地址为4个字节,所以最多可以支持42亿个地址,但在现在,42亿明显不够用了。这就衍生出下面几个机制。…...
开发环境搭建-3:配置 nodejs 开发环境 (fnm+ node + pnpm)
在 WSL 环境中配置:WSL2 (2.3.26.0) Oracle Linux 8.7 官方镜像 node 官网:https://nodejs.org/zh-cn/download 点击【下载】,选择想要的 node 版本、操作系统、node 版本管理器、npm包管理器 根据下面代码提示依次执行对应代码即可 基本概…...
14_音乐播放服务_字典缓存避免重复加载
首先在游戏根入口下创建空节点 F2重命名为BGAudio 作为播放 背景音乐的对象 在BGAudio对象上挂载组件 AudioSource 关掉PlayOnAwake 因为我们需要通过代码来控制音效 音量大小设置为0.5 Ctrl d 再复制一份背景播放对象BGAudio 重命名为UIAudio 作为UI窗口操作的播放对象 创建…...
pgsql中处理数组类型字段
1、代码中存入和读取 需要使用自定义转换器 Slf4j public class ArrayTypeHandler extends BaseTypeHandler<List<String>> {Overridepublic void setNonNullParameter(PreparedStatement ps, int i, List<String> parameter, JdbcType jdbcType)throws SQL…...
新年好(Dijkstra+dfs/全排列)
1135. 新年好 - AcWing题库 思路: 1.先预处理出1,a,b,c,d,e到其他点的单源最短路,也就是进行6次Dijkstra 2.计算以1为起点的这6个数的全排列,哪种排列方式所得距离最小,也可以使用dfs 1.Dijkstradfs #define int long longusing …...
vscode导入模块不显示类型注解
目录结构: utils.py: import random def select_Jrandom(i:int, m:int) -> int:"""随机选择一个不等于 i 的整数"""j iwhile j i:j int(random.uniform(0, m))return jdef clip_alpha(alpha_j:float, H:float, L:f…...
Stable diffusion 都支持哪些模型
Stable Diffusion 支持多种模型,主要包括以下几类: 官方基础模型: SD 1.x 系列(如 Stable Diffusion 1.4、1.5):这是最经典的模型,适合多种通用场景,使用简单且易于上手。SD 2.x 系列…...
C语言操作符(上)
操作符 一,操作符的分类1,算数操作符2,赋值操作符3,逻辑操作符4,条件操作符4,单目操作符5,函数调用和下表访问操作符 二,原码反码补码三,移位操作符1,左移操作…...
Linux TCP 之 RTT 采集与 RTO 计算
我们来看看 Linux TCP 采集 RTT 的函数 tcp_rtt_estimator,看注释,充满了胶着。 但在那个谨慎的年代,这些意味着什么? RTT 最初仅用于 RTO 的计算而不是用于调速,RTO 的计算存在两个问题,如果过估&#x…...
智慧水务管网在线监测平台(Axure高保真原型)
智慧水务管网在线监测平台是一种集成了物联网、大数据、云计算和人工智能等技术的综合管理系统。平台的主要目的是提高水务管理的效率和安全,确保供水系统的稳定运行。 智慧水务管网在线监测平台的主要特点和功能: 综合监测与管理:智慧水务平…...
Kubernetes 架构图和组件
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:历代文学,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编程,高并发设计…...
不建模,无代码,如何构建一个3D虚拟展厅?
在数字化浪潮的推动下,众多企业正积极探索线上3D虚拟展厅这一新型展示平台,旨在以更加生动、直观的方式呈现其产品、环境与综合实力。然而,构建一个既专业又吸引人的3D虚拟展厅并非易事,它不仅需要深厚的技术支持,还需…...
MMDetection学习系列(5)——Mask R-CNN深度探索与实战指南
目录 实例分割 R-CNN系列 R-CNN Fast R-CNN Faster R-CNN Mask R-CNN Mask R-CNN 头部结构细节 两阶段架构 损失函数 掩码 RoIAlign Faster R-CNN中的RoIPool Mask R-CNN 中的RoIAlign 实例分割实验 消融研究 定性结果 SOTA 方法比较 Coovally AI模型训练与…...
Oracle SQL: TRANSLATE 和 REGEXP_LIKE 的知识点详细分析
目录 前言1. TRANSLATE2. REGEXP_LIKE3. 实战 前言 🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF 1. TRANSLATE TRANSLATE 用于替换字符串中指定字符集的每个字符,返回替换后的字符串 逐一映射输入字…...
PHP语言的软件工程
PHP语言的软件工程 引言 软件工程是计算机科学中的一个重要分支,它涉及软件的规划、开发、测试和维护。在现代开发中,PHP作为一种流行的服务器端脚本语言,广泛应用于网页开发和各种企业应用中。本文将深入探讨PHP语言在软件工程中的应用&am…...
量变引起质变
量变引起质变,这个是最本质的规律,重复进行一件事情,这件事情就会越来越完善,越来越完美,哪怕是菜鸟,重复多了就是大佬。 我从说话结结巴巴,到说话流畅,只是用了15天直播写代码&…...
【专题】为2025制定可付诸实践的IT战略规划报告汇总PDF洞察(附原数据表)
原文链接:https://tecdat.cn/?p39055 在当今瞬息万变的商业环境中,制定有效的 IT 战略规划对于企业的成功与可持续发展至关重要。本报告深入探讨了制定 IT 战略规划的关键活动,旨在为企业和决策者提供全面且实用的指导。 Gartner的《为202…...
Linux内核 -- Linux 的 BIO框架
深入理解 Linux 的 BIO 在 Linux 内核中,BIO(Block I/O)是块层(block layer)用于描述块设备 I/O 请求的核心数据结构。它在文件系统与块设备驱动程序之间充当“载体”,负责把数据页及相关元数据从上层提交…...
Spring WebFlux 和 Spring MVC 的主要区别是什么?
Spring WebFlux 和 Spring MVC 都是 Spring 框架中用于构建 Web 应用的模块,但它们在设计理念、编程模型、性能特性等方面存在显著区别。以下是它们的主要区别: ### 1. **编程模型** - **Spring MVC**: - **同步和阻塞**:Spri…...
卸载和安装Git小乌龟、git基本命令
卸载 Git 打开控制面板: 按 Win R 打开运行对话框,输入 control 并按回车键。或直接在功能搜索里搜索“控制面板”。在控制面板中,选择“程序”或“程序和功能”。 查找并卸载 Git: 在程序列表中找到“Git”或“Git for Windows…...
正向代理与反向代理的主要区别
正向代理与反向代理的主要区别 正向代理与反向代理都是中间服务器 特性正向代理反向代理位置客户端和目标服务器之间客户端和后端服务器之间客户端感知客户端知道代理的存在,并主动连接代理客户端不知道代理的存在,认为直接连接目标服务器主要用途隐藏…...