纯JS+Vue实现一个仪表盘
在使用canvas的时候发现数值变化,每次都要重新渲染,值都从0开始,这和我的需求冲突。
1. 先绘制基本的圆环背景,利用border-color和border-radius将正方形变成基本的圆环。
<div class="circle"><div class="Inner"></div>
</div>
.circle {position: relative;border-radius: 50%;border: 12px solid;border-color: green green transparent green;width: 480px;height: 484px;top: 4%;left: 12%;
}

利用border-radius,就可将正方形变成圆形

2. 背景绘制完成,下面就是每个刻度。
<div class="circle"><div class="Inner"></div><div class="center"></div><div class="pointer"></div>
</div>
.center{width: 20px;height: 20px;background-color: grey;border-radius: 50%;position: absolute;z-index: 35;top: calc(50% - 5px);left: calc(50% - 5px);
}
.pointer{width: 190px;height:10px;background-color: red;border-radius: 50%;position: absolute;z-index: 34;top: calc(50% - -2px);left: calc(50% - 6px); transform-origin:5% 35%;
}
.number {color: #fff;display: block;padding-top: 16px;position: absolute;left: -6px;
}
一共100个值,每两个刻度就要有线,到10线的长度会更长一点。其实和画钟表一样,0的位置是坐标轴的225°,到100的位置,总共是180°+45°
mounted() {let circle = document.getElementsByClassName('Inner')[0];circle.style.setProperty('--width', Math.floor(227) + 'px');for (let i = 0; i <= 50; i++) {const ul = document.createElement('ul');const li = document.createElement('li');li.style.transform = `rotate(${225 + i * 2 * 2.7}deg)`;if (i % 5 === 0) {li.style.height = '15px';li.innerHTML = `<span class = 'number'>${i*2}</span>`}circle?.appendChild(ul);ul.appendChild(li);}
}

3. 让指针根据数据变动,和刻度一样,每移动一个点要更改相应的刻度
<div class="circle"><div class="Inner"></div><div class="center"></div><div class="pointer"></div><div class="num">{{dataValue}}%</div>
</div><script>
export default {data() {return {dataValue: 50,}},watch: {dataValue: {handler(newValue, oldVal) {this.dataValue = newValue;this.runGuage()},},},methods: {runGuage() {let pointer = document.getElementsByClassName("pointer")[0];pointer.style.transform = `rotate(${137 + this.dataValue * 2.66}deg)`;},},mounted() {this.runGuage();}
}
</script> <style scoped>
.num{position: absolute;color: #fff;font-size: 70px;z-index: 32;top: 54%;left: 30%;
}
</style>

相关文章:
纯JS+Vue实现一个仪表盘
在使用canvas的时候发现数值变化,每次都要重新渲染,值都从0开始,这和我的需求冲突。 1. 先绘制基本的圆环背景,利用border-color和border-radius将正方形变成基本的圆环。 <div class"circle"><div class&qu…...
标定(内参、外参)
在计算机视觉中,特别是在相机标定和立体视觉领域,内参(intrinsic parameters)和外参(extrinsic parameters)是非常重要的概念。它们与相机的几何属性和姿态有关。 内参(Intrinsic Parameters&am…...
基于ffmpeg与SDL的视频播放库
由于工作需要,自己封装的基于ffmpeg的视频编解码库,显示采用了SDL库。可以播放本地文件或网络流,支持多端口播放,支持文字叠加,截图、视频录制等等。 头文件代码: #pragma once #ifdef __DLLEXPORT #defin…...
基于二进制草蝉优化算法选择特征并使用 KNN 进行训练(Matlab代码实现)
目录 💥1 概述 📚2 运行结果 🎉3 参考文献 👨💻4 Matlab代码 💥1 概述 基于二进制草蝉优化算法选择特征并使用KNN(K-Nearest Neighbors,K最近邻算法)进行训练是一种…...
14-4_Qt 5.9 C++开发指南_QUdpSocket实现 UDP 通信_UDP组播
文章目录 1. UDP组播的特性2. UDP 组播实例程序的功能3. 组播功能的程序实现4. 源码4.1 可视化UI设计4.2 mainwindow.h4.3 mainwindow.cpp 1. UDP组播的特性 下图简单表示了组播的原理。UDP 组播是主机之间“一对一组”的通信模式,当多个客户端加入由一个组播地址定…...
ai图片合成软件帮你创造个性绚丽
嘿!悄悄告诉你一个小秘密,现在有一款超酷的软件,它能让你的图片变得活灵活现,就像跳出了屏幕一样!没错,这就是ai图片制作软件!想象一下,你拍摄了一张美丽的风景照片,但总…...
git 版本回退
git 没有push之前,可以用git reset --mixed回退,就是把add 的内容和commit的内容都撤销 在push之后,你只有2种操作 1.git reset 退回到你想要的那个版本 有配置选项 如果是soft就是当前版本删掉,之前改的代码保留,ha…...
使用Jackson自定义序列化操作(Jackson – Custom Serializer)
目录 Standard Serialization of an Object GraphCustom Serializer on the ObjectMapperCustom Serializer on the Class Standard Serialization of an Object Graph Data NoArgsConstructor AllArgsConstructor public class Item {public int id;public String itemName;p…...
Python-元组
元组(Tuples)详解 在Python中,元组(Tuples)是一种有序的数据类型,它可以包含任意类型的元素,包括数字、字符串、列表等。与列表相似,元组也是用来存储一组数据,但与列表…...
快速转换PDF文件: Python和PyMuPDF教程
解决问题 有时候将文档上传Claude2做分析,有大小限制,所以需要切割pdf文档为几个小点的文档,故才有了本文章。 如何用Python和PyMuPDF制作你想要大小的PDF? PDF是一种广泛使用的文件格式,可以在任何设备上查看和打印…...
规划模型Matlab代码
文章目录 数学规划定义一般形式分类 1.线性规划(linear programming)2.非线性规划(nonlinear programming)3. 整数规划(integer programming)4. 0-1规划(0-1 programming)5. 最大最小化模型6. 多目标规划模型7.敏感性分析(对权重)[例题] 数学规划定义 数…...
用html+javascript打造公文一键排版系统11:改进单一附件说明排版
一、用htmljavascript打造公文一键排版系统10中的一个bug 在 用htmljavascript打造公文一键排版系统10:单一附件说明排版 中,我们对附件说明的排版函数是: function setAtttDescFmt(p) {var t p;var a ;if (-1 ! t.indexOf(:))//是半角冒…...
snap xxx has “install-snap“ change in progress
error description * 系重复安装,进程冲突 solution 展示snap的改变 然后sudo snap abort 22即可终止该进程 之后重新运行install command~~ PS: ubuntu有时候加载不出来,执行resolvectl flush-caches,清除dns缓存…...
Elasticsearch 性能调优指南
目录 1、通用优化策略 1.1 通用最小化法则 1.2 职责单一原则 1.3 其他 2、写性能调优 2.1 基本原则 2.2 优化手段 2.2.1 增加 flush 时间间隔, 2.2.2 增加refresh_interval的参数值 2.2.3 增加Buffer大小, 2.2.4 关闭副本 2.2.5 禁用swap 2…...
学习Boost一:学习方法和学习目的
学习目的 Boost 的学习目的: 因为从知乎和CSND上根据了解内容来看,Boost作为一个历史悠久的开源库,已经脱离了一个单纯的库的概念了,他因庞大的涉及面应当被称之为库集。 并且,因为boost库优秀的试用反馈和开发人员的…...
c语言每日一练(1)
前言: 每日一练系列,每一期都包含5道选择题,2道编程题,博主会尽可能详细地进行讲解,令初学者也能听的清晰。每日一练系列会持续更新,暑假时三天之内必有一更,到了开学之后,将看学业情…...
iOS开发-CocoaLumberjack日志库实现Logger日志功能
iOS开发-Logger日志功能实现 在iOS开发中,常用CocoaLumberjack来作为日志功能实现的日志框架 一、CocoaLumberjack是什么? CocoaLumberjack 是 支持 iOS 和 Mac 平台的日志框架,使用简单,功能强大且不失灵活,它的主…...
深度学习(34)—— StarGAN(2)
深度学习(34)—— StarGAN(2) 完整项目在这里:欢迎造访 文章目录 深度学习(34)—— StarGAN(2)1. build model(1)generator(2&#…...
use lua
-- basic.lua print("hello ".."world") local a 1 --only this file can see b 2 -- global see -- not declare vaiable all asign to nil print(fuck) -- 字符串可以"" , ,[[]] -- 一些数值运算支持,进制数,科学数&a…...
网络——初识网络
网络基础 文章目录 网络基础计算机网络产生的背景认识网络协议网络协议初识协议分层OSI七层模型TCP/IP四层模型网络传输基本流程协议报头 认识IP地址认识MAC地址ifconfig查看主机地址ifconfig查看主机地址 计算机网络产生的背景 独立模式:计算机之间相互独立 早期的…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
Kafka入门-生产者
生产者 生产者发送流程: 延迟时间为0ms时,也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于:异步发送不需要等待结果,同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...
离线语音识别方案分析
随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...
Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...
