vue3 + ts实现canvas绘制的waterfall

实际运行效果(仅包含waterfall图表部分)
在这里插入图片描述

component.vue

<template><div ref="heatmap" :style="{ height: props.containerHeight + 'px' }" />
</template><script setup>
import ColorMap from "colormap";
import { round } from "lodash";
import { ref, reactive, watch, onMounted, watchEffect } from "vue";
const props = defineProps({height: {type: Number,default: 50, // 代表一个屏幕有多少帧},minDb: {type: Number, // 最小值default: 0,},maxDb: {type: Number, // 最大值default: 1000,},containerHeight: {type: Number,default: 210, // 容器高度},legendWidth: {// 左侧色条宽度type: Number,default: 50,},isOnline: {type: Boolean, // 判断是否在线default: false,},sdata: {type: Array,default: () => [], // 实际要显示的数据},startVal: {type: Number,default: 0, // 数据开始的位置},
});
// 图表容器 DOM 的引用
const heatmap = ref(null);
const state = reactive({canvasCtx: null,fallsCanvasCtx: null,legendCanvasCtx: null,canvasWidth: 0,colormap: [],
});
const firstRender = ref(true);
const renderNum = ref(0);
const plotData = ref([]);
let playControl = reactive({ cycleStart: props.startVal });
const requestChartsData = () => {// const data = Array.from({ length: 20000 }, () => -Math.floor(Math.random() * 100) + 1);plotData.value = props.sdata;
};const initComponent = () => {if (!heatmap.value) {return;}// 获取容器宽高const { clientWidth

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

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

相关文章

一次有关 DNS 解析导致 APP 慢的问题探究

一、业务背景 HTTTPDNS AWS Router53 APP 使用 HTTPDNS&#xff0c; 为解决 DNS 解析生效慢&#xff0c; DNS 劫持等问题。 我们 IOS 和安卓都是使用了 HTTPDNS。 域名托管在 AWS Router53。 域名有多个解析(基于延迟)&#xff0c;为了解决就近接入。 示例配置 ai.baidu.c…

首席数据官CDO行业背景主要职责是什么?

首席数据官&#xff08;Chief Data Security Officer&#xff0c;简称CDO&#xff09;&#xff0c;是指在企业中负责整个机构的数据安全策略&#xff0c;监控、治理、控制、协调企业内部的数据安全工作、政策制定和有效利用的高级管理人员。包括信息技术、人力资源、通信、合规…

英语学习笔记3——Sorry, sir.

Sorry, sir. 对不起&#xff0c;先生。 词汇 Vocabulary umbrella n. 伞&#xff0c;保护伞 注意读音 [ʌm’brelə] 英国人离不开雨伞。 please 请 特殊用法&#xff1a;让路&#xff08;升调&#xff09;      用餐礼仪&#xff08;平调&#xff09;      求求你…

10.Java对象内置结构

文章目录 Java对象内置结构1.Java对象的三个部分1.1.对象头1.2.对象体1.3.对齐字节 2.对象结构中核心字段的作用2.1.MarkWord(标记字)2.2.Class Pointer(类对象指针)2.3.Array Length(数组长度)2.4.对象体2.5.对齐字节 3.Mark Word的结构信息3.1.不同锁状态下的Mark Word字段结…

在vcenter 资源池中创建安装虚拟机

打开vSphere客户端并登录到vCenter服务器。在左侧导航栏中&#xff0c;选择您要在其中创建虚拟机的资源池。在资源池的摘要选项卡中&#xff0c;单击"创建虚拟机"按钮。在虚拟机创建向导中&#xff0c;填写虚拟机的名称、操作系统和其他配置选项。在选择存储选项中&a…

耐高温轴承新选择:锅炉、固化炉、无油自润滑,稳定又可靠

江苏鲁岳轴承制造有限公司是一家专业从事高温轴承研发、生产和销售的企业。该公司的高温轴承产品具有出色的技术性能和广泛的应用领域。 以下是江苏鲁岳耐高温轴承的技术介绍&#xff1a; 承载能力强&#xff1a;江苏鲁岳的高温轴承通常采用高温合金、陶瓷等特殊材料制造&…

人工智能_大模型049_模型微调009_llama2模型训练_代码分析和实现_代码记录---人工智能工作笔记0184

以上是项目的整体结构,其中上一节我们看了chatglm3目录下,对chatglm3模型的训练部分的代码,然后 这里的llama2目录下是对llama2模型进行训练的代码. 然后web_demo目录是,对web浏览器中,使用chatglm3,以及llama2.py进行的封装下一节我们再看这个部分 E:\2024\人工智能\fine-tun…

[疑难杂症2024-004] 通过docker inspect解决celery多进程记录日志莫名报错的记录

本文由Markdown语法编辑器编辑完成&#xff0e; 1. 前言 最近我负责的一个服务&#xff0c;在医院的服务器上线一段时间后&#xff0c;利用docker logs查看容器的运行日志时&#xff0c;发现会有一个"莫名其妙"的报错&#xff0e;报错的大致内容就是&#xff0c;ce…

docker的commit命令使用制作镜像

docker run -it ubuntu 最基础的ubuntu启动后安装vim 的命令 apt-get update apt-get -y install vim docker commit -m"my_test_ubuntu" -a"za" 80977284a998 atljw/myubuntu:1.0 将本地镜像推送到阿里云 首先登录阿里云服务-控制台 记得一定要设定设…

JVS物联网设备连接管理:支持手动与定时启停

通道连接的启停 功能说明 为了更灵活地管理设备连接&#xff0c;平台需要在设备连接的新增和编辑功能中增加启停策略的配置。支持手动启停和定时启停两种选项&#xff0c;以便根据实际需求对设备连接进行灵活的控制。 功能 手动启停&#xff1a; 用户可以选择手动启停作为…

uniapp uni-push 1.0 APP消息推送实现

1.获取cid plus.push.getClientInfoAsync((info) > {let cid info["clientid"]; }); 2.在manifest.json中找到App模块配置&#xff0c;勾选Push(消息推送)&#xff0c;重新打一个自定义基座&#xff0c;再真机运行 3.在DCloud官网使用获取到的cid自测消息是否可…

抖音爆火的QQ价格评估前端源码

最近抖音很火直播给别人测qq价值多少&#xff0c;这个源码只有前端&#xff0c; 包含激活码验证页&#xff0c;评估页 源码免费下载地址抄笔记 (chaobiji.cn)

springboot+mp自动生成没有实体类

mybatisX版本冲突问题 一开始我的MyBatisX版本是1.6.1-3,使用mybatis-plus一直不能正常生成实体类 将MyBatisX的版本换成了1.5.7就可以了 MyBatisX版本更换 1.将原有的MyBatisX卸载后重新安装一个新的版本 2.选择一个合适的版本,这里我选的是1.5.7 下载完成后自己选择一个…

两次DNAT(端口映射)的问题验证

1.问题描述 某Linux课程上看到&#xff0c;两次DNAT&#xff08;端口映射&#xff09;会导致TCP源丢失的问题&#xff0c;因为本身学过网络相关的知识&#xff0c;理论上并未发现会在哪个节点丢失源的问题&#xff0c;遂实验验证。 2.ensp模拟验证 因为使用手头没有eve模拟器…

Apache POI入门学习

Apache POI入门学习 官网地址 excel中使用到的类读取excel表格内容表格内容maven依赖方式一测试结果 方式二测试结果 向excel中写入数据方式一方式二方式三测试结果 从 Excel 工作表中的公式单元格读取数据测试结果 Excel 工作表中写入公式单元格从受密码保护的Excel中读取数据…

远程代码/命令执行(RCE)

远程代码执行/远程命令执行&#xff08;remote/code/execute||remote/command/execute&#xff09; 类似sql注入xss等漏洞&#xff0c;rce也是代码注入&#xff08;用户可控&#xff09;&#xff0c;注入对象为操作系统命令、后端代码&#xff0c;用户参 数可控&#xff0c;且未…

autoware.auto 安装 ROS2

先进行docker安装 sudo apt-get update sudo apt-get install ca-certificates curl gnupg lsb-release curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - sudo add-apt-repository "deb [archamd64] https://download.docker.com/linux/u…

【前端】HTML基础(2)

文章目录 前言一、HTML常见标签1、 注释标签1.1 标题标签1.2 段落标签1.3 换行标签 2、 格式化标签2.1 加粗标签2.2 倾斜标签2.3 删除线标签2.4 下划线标签 3、 图片标签3.1 src属性3.2 alt属性3.3 title属性3.4 图片大小3.5 图片边框 4、 超链接标签4.1 属性4.2 属性 前言 这篇…

Chromium编译指南2024 Windows11篇-配置depot_tools工具(二)

前言 在《Chromium编译指南2024&#xff08;一&#xff09;》我们探讨了Chromium编译前的准备工作和Visual Studio安装。 接下来&#xff0c;我们将详细介绍如何下载、解压并配置depot_tools工具&#xff0c;以便顺利进行后续的开发工作。 1. 下载解压depot_tools 包 下载d…

Python | Leetcode Python题解之第73题矩阵置零

题目&#xff1a; 题解&#xff1a; class Solution:def setZeroes(self, matrix: List[List[int]]) -> None:m, n len(matrix), len(matrix[0])flag_col0 Falsefor i in range(m):if matrix[i][0] 0:flag_col0 Truefor j in range(1, n):if matrix[i][j] 0:matrix[i]…