当前位置：首页 > news >正文

vue3+echarts 做温度计

news 来源：原创 2025/7/17 16:37:31

参考Echarts 做的温度计_echart温度计-CSDN博客

但是现在这个写法不支持了，更新一下，然后修改了温度值和刻度及单位颜色为黑，初始化echarts写法,

itemStyle: {normal: {color: '#4577BA',barBorderRadius: 50,}},

    <div id="main14" style="width: 460px;height:360px;"></div>
// 模拟接口返回的数据
const mockSensorData = ref({"deviceId": "93883102004b1200","params": {"temperature": "28.03","humidity": "36.06","battery": 100,}
});
import * as echarts from "echarts";
onMounted(() => {
// 温度计var tempChartDom = document.getElementById("main14")!;var tempChart = echarts.init(tempChartDom);// var TP_value = 40;var TP_value = parseFloat(mockSensorData.value.params.temperature);var kd = [];var Gradient = [];var leftColor = '';var showValue = '';var boxPosition = [65, 0];var TP_txt = ''// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据for (var i = 0, len = 135; i <= len; i++) {if (i < 10 || i > 130) {kd.push('');} else {if ((i - 10) % 20 === 0) {kd.push('-3');} else if ((i - 10) % 4 === 0) {kd.push('-1');} else {kd.push('');}}}//中间线的渐变色和文本内容if (TP_value > 80) {TP_txt = '';Gradient.push({offset: 0,color: '#93FE94'}, {offset: 0.5,color: '#E4D225'}, {offset: 1,color: '#E01F28'})} else if (TP_value > 10) {TP_txt = '';Gradient.push({offset: 0,color: '#93FE94'}, {offset: 1,color: '#E4D225'})} else {TP_txt = '';Gradient.push({offset: 1,color: '#93FE94'})}/*  if(TP_value > 62) {showValue = 62} else {if(TP_value < -60) {showValue = -60} else {showValue = TP_value}}if(TP_value < -10) {boxPosition = [65, -120];} */leftColor = Gradient[Gradient.length - 1].color;// 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10var tempOption: EChartsOption = {title: {text: '温度计',show: false},yAxis: [{show: false,data: [],min: 0,max: 135,axisLine: {show: false}}, {show: false,min: 0,max: 50,}, {type: 'category',data: ['', '', '', '', '', '', '', '', '', '', '°C'],position: 'left',offset: -80,axisLabel: {fontSize: 10,color: 'black'},axisLine: {show: false},axisTick: {show: false},}],xAxis: [{show: false,min: -10,max: 80,data: []}, {show: false,min: -10,max: 80,data: []}, {show: false,min: -10,max: 80,data: []}, {show: false,min: -5,max: 80,}],series: [{name: '条',type: 'bar',// 对应上面XAxis的第一个对)象配置xAxisIndex: 0,data: [{value: (TP_value + 30),//这个改那个颜色刻度的label: {show: true,position: boxPosition as any,width: 20,height: 100,formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',rich: {back: {align: 'center',lineHeight: 50,fontSize: 30,fontFamily: 'digifacewide',color: leftColor},unit: {fontFamily: '微软雅黑',fontSize: 15,lineHeight: 50,color: leftColor},downTxt: {lineHeight: 50,fontSize: 25,align: 'center',color: '#fff'}}}}],barWidth: 18,itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)},z: 2}, {name: '白框',type: 'bar',xAxisIndex: 1,barGap: '-100%',data: [134],barWidth: 28,itemStyle: {color: '#0C2E6D',borderRadius: 50},z: 1}, {name: '外框',type: 'bar',xAxisIndex: 2,barGap: '-100%',data: [135],barWidth: 38,itemStyle: {color: '#4577BA',borderRadius: 50},z: 0}, {name: '圆',type: 'scatter',data: [0],xAxisIndex: 0,symbolSize: 48,itemStyle: {color: '#93FE94',opacity: 1},z: 2}, {name: '白圆',type: 'scatter',data: [0],xAxisIndex: 1,symbolSize: 60,itemStyle: {color: '#0C2E6D',opacity: 1},z: 1}, {name: '外圆',type: 'scatter',data: [0],xAxisIndex: 2,symbolSize: 70,itemStyle: {color: '#4577BA',opacity: 1},z: 0}, {name: '刻度',type: 'bar',yAxisIndex: 0,xAxisIndex: 3,label: {show: true,position: 'left',distance: 10,color: 'black',fontSize: 14,formatter: function (params: any) {const dataIndex = params.dataIndex;if (dataIndex > 130 || dataIndex < 10) {return '';} else {if ((dataIndex - 10) % 20 === 0) {return String(dataIndex - 30);} else {return '';}}}},barGap: '-100%',data: kd,barWidth: 1,itemStyle: {color: 'black',borderRadius: 120},z: 0}]};// 使用刚指定的配置项和数据显示图表。tempOption && tempChart.setOption(tempOption);
});
}）

vue3+echarts 做温度计

参考Echarts 做的温度计_echart温度计-CSDN博客但是现在这个写法不支持了，更新一下，然后修改了温度值和刻度及单位颜色为黑，初始化echarts写法, itemStyle: {normal: {color: #4577BA,barBorderRadius: 50,}},<div id"main14"…...

编程日记 2025/7/17 16:37:31

鸿蒙开发——7.ArkUI进阶：@BuilderParam装饰器的核心用法与实战解析

鸿蒙开发——7.ArkUI进阶：BuilderParam装饰器的核心用法与实战解析 ArkUI进阶：BuilderParam装饰器的核心用法与实战解析引言一、核心概念速览1.1 什么是BuilderParam？1.2 与Builder的关系二、核心使用场景2.1 参数初始化组件2.2 尾随闭包初始…...

编程日记 2025/7/17 11:22:44

【数据结构】队列的完整实现

队列的完整实现队列的完整实现github地址前言1. 队列的概念及其结构1.1 概念1.2 组织结构 2. 队列的实现接口一览结构定义与架构初始化和销毁入队和出队取队头队尾数据获取size和判空完整代码与功能测试结语队列的完整实现 github地址有梦想的电信狗前言队列&…...

编程日记 2025/7/17 16:02:02

销售易史彦泽：从效率工具到增长引擎，AI加速CRM不断进化

导读：AI的加入，让CRM实现从“人适配系统”到“系统适配人”，从“管控工具”向“智能助手”跃迁，重构客户关系管理的底层逻辑。作者 | 小葳图片来源 | 摄图 AI应用与SaaS的关系，是当前科技与商业领域热议的话题。当…...

编程日记 2025/7/17 16:02:50

开疆智能Profinet转ModbusTCP网关连接BORUNTE伯朗特系统配置案例

本案例是通过开疆智能Profinet转ModbusTCP网关将西门子PLC与BORUNTE机器人连接的配置案例。具体配置方法如下。配置过程 Profinet设置设置网关在Profinet一侧的参数包括（设备名称，IP地址等） 先导入GSD文件选择GSD所在文件夹位置&#…...

编程日记 2025/7/17 16:08:38

从0到1搭建shopee测评自养号系统：独立IP+硬件伪装+养号周期管理

在跨境电商竞争白热化的背景下，Shopee卖家通过自养号测评实现流量与销量突破已成为行业共识。自养号测评通过模拟真实买家行为，为店铺注入精准流量，同时规避外包测评的高风险与不可控性。本文将从技术架构、运营策略、风险控制三个维度&#…...

编程日记 2025/7/17 16:10:20

arrow-0.1.0.jar 使用教程 - Java jar包运行方法命令行启动步骤常见问题解决

准备工作首先确保你电脑上装了Java环境（JDK 8或以上版本） 把这个jar文件下载到你的电脑上，arrow-0.1.0.jar下载链接：https://pan.quark.cn/s/66d7c061c95a 运行方法打开命令行（Windows按WinR输入cmd，M…...

编程日记 2025/7/15 6:47:26

请问交换机和路由器的区别？vlan 和 VPN 是什么？

交换机和路由器的区别特性交换机（Switch）路由器（Router）工作层级数据链路层（L2，基于MAC地址）网络层（L3，基于IP地址）主要功能在局域网（LAN&#…...

编程日记 2025/7/10 1:37:58

如何查看与设置电脑静态IP地址：完整指南

在当今数字化时代，稳定的网络连接已成为工作生活的必需品。静态IP地址作为网络配置中的重要一环，相比动态IP具有更高的稳定性和可控性，然而，许多用户对如何查看和设置静态IP地址仍感到困惑。本文将为您提供从基础概念到实操步骤的…...

编程日记 2025/7/17 16:22:22

Linux网络基础全面解析：从协议分层到局域网通信原理

Linux系列文章目录 Linux系列前言一、计算机网络背景1.1 认识网络1.2 认识协议二、网络协议初识2.1 协议分层2.2 OSI七层模型2.3 TCP/IP协议栈2.4 网络协议栈与OS的关系2.5 网络协议在网络传输时的作用三、网络通信局域网通信的安全隐患与应对总结前言 Linux系统部分的学习…...

编程日记 2025/7/17 16:10:19

第二篇：服务与需求——让用户找到并预订服务

目录 1 服务类目与项目管理：飞书多维表格为管理中心，微搭小程序展示1.1 需求分析1.2 数据模型：微搭中的服务分类与服务项目（用于小程序展示）1.3 数据模型：多维表格中的服务分类与服务项目总结我们已经用了…...

编程日记 2025/7/15 9:51:43

【AI News | 20250520】每日AI进展

AI Repos 1、nanoDeepResearch nanoDeepResearch 是一个受 ByteDance 的 DeerFlow 项目启发，旨在从零开始构建深度研究代理的后端项目。它不依赖 LangGraph 等现有框架，通过实现一个 ReAct 代理和状态机来模拟 Deep Research 的工作流程。项目主要包含规…...

编程日记 2025/7/17 12:49:50

Spark Core基础与源码剖析全景手册

Spark Core基础与源码剖析全景手册 Spark作为大数据领域的明星计算引擎，其核心原理、源码实现与调优方法一直是面试和实战中的高频考点。本文将系统梳理Spark Core与Hadoop生态的关系、经典案例、聚合与分区优化、算子底层原理、集群架构和源码剖析，结合…...

编程日记 2025/7/16 19:06:22

抖音视频如何下载保存？高清无水印一键保存到手机！

你是不是经常在抖音上刷到超有趣的短视频，想保存下来却不知道怎么做？或者下载后发现带有烦人的水印？别担心！今天教你最简单、最快速的抖音视频下载方法，无水印、高清画质，轻松搞定！ 为什么要下…...

编程日记 2025/7/17 16:14:21

SCAU--平衡树

3 平衡树 Time Limit:1000MS Memory Limit:65535K 题型: 编程题语言: G;GCC;VC;JAVA;PYTHON 描述平衡树并不是平衡二叉排序树。这里的平衡指的是左右子树的权值和差距尽可能的小。给出n个结点二叉树的中序序列w[1],w[2],…,w[n]，请构造平衡树&#xff0c…...

编程日记 2025/7/16 1:56:56

图的几种存储方法比较：二维矩阵、邻接表与链式前向星

图是一种非常重要的非线性数据结构，广泛应用于社交网络、路径规划、网络拓扑等领域。在计算机中表示和存储图结构有多种方法，本文将详细分析三种常见的存储方式：二维矩阵（邻接矩阵）、邻接表和链式前向星，比…...

编程日记 2025/7/17 4:55:49

【AS32X601驱动系列教程】MCU启动详解

在嵌入式开发领域，掌握MCU（微控制单元）的启动流程是工程师们迈向深入开发的关键一步。本文将带您深入了解MCU启动的奥秘，从编译过程到启动文件，再到链接脚本和系统时钟配置，全方位解析MCU启动流程。在实际…...

编程日记 2025/7/14 5:46:59

计算机视觉与深度学习｜ Matlab实现EMD-GWO-SVR、EMD-SVR、GWO-SVR、SVR时间序列预测（完整源码和数据）

以下是一个完整的Matlab时间序列预测实现方案，包含EMD-GWO-SVR、EMD-SVR、GWO-SVR和SVR四种方法的对比。代码包含数据生成、信号分解、优化算法和预测模型实现。 %% 主程序：时间序列预测对比实验 clc; clear; clearvars; close all;% 生成模拟时间序列数据 rng(1); % 固定随…...

编程日记 2025/7/15 1:17:13

Visual Studio 2022 插件推荐

Visual Studio 2022 插件推荐 Visual Studio 2022 (简称 VS2022) 是一款强大的 IDE，适合各类系统组件、框架和应用的开发。插件是接入 VS2022 最重要的扩展方式之一，它们可以大幅提升开发效率、优化代码质量，并提供强大的调试和分析功能。 …...

编程日记 2025/7/17 16:07:23

[luogu12541] [APIO2025] Hack! - 交互 - 构造 - 数论 - BSGS

传送门：https://www.luogu.com.cn/problem/P12541 题目大意：有一个数 n n n，你不知道是多少；你每次可以向交互库询问一个正整数集合 A A A（其中元素互不相同），交互库返回：将集合中…...

编程日记 2025/7/17 16:35:20

openjdk底层(hotspot)汇编指令调用（五）——内存访问

根据前面关于aarch64架构下的编码解释可知，在src\hotspot\cpu\架构文件夹下， assembler_xx.hpp assembler_xx.cpp register_xx.hpp register_xx.cpp register_definitions_xx.cpp这些文件是有关寄存器定义以及汇编编码函数实现的文件。对于前述的ope…...

编程日记 2025/7/17 16:02:50

几款常用的虚拟串口模拟器

几款常用的虚拟串口模拟器（Virtual Serial Port Emulator），适用于 Windows 系统，可用于开发和调试串口通信应用： 1. com0com (开源免费) 特点： 完全开源免费，无功能限制。可创建多个虚拟串口…...

编程日记 2025/7/17 1:22:44

ChimeraX介绍

UCSF ChimeraX 是一款由美国加州大学旧金山分校（UCSF）开发的下一代分子可视化软件，是经典的 UCSF Chimera 的继任者。它集成了强大的分子结构可视化、分析、建模和动画功能，广泛应用于结构生物学、药物设计、分子建模等领域。 1. 下载安装： Download UCSF ChimeraX 2. …...

编程日记 2025/7/17 1:08:28

【Linux】初见，基础指令

前言本文将讲解Linux中最基础的东西-----指令，带大家了解一下Linux中有哪些基础指令，分别有什么作用。本文中的指令和选项并不全，只介绍较为常用的 pwd指令语法：pwd 功能：显示当前所在位置（路径&#xf…...

编程日记 2025/7/17 16:21:05

链表的面试题8之环形链表

许久不见，那么这是最后倒数第三题了，这道题我们来看一下环形链表。老规矩贴链接：141. 环形链表 - 力扣（LeetCode） 目录倒数第k个元素获取中间元素的问题。双指针来，大致看一下题目，这…...

编程日记 2025/6/28 22:01:48

OBS Studio：windows免费开源的直播与录屏软件

OBS Studio是一款免费、开源且跨平台的直播与录屏软件。其支持 Windows、macOS 和 Linux。OBS适用于，有直播需求的人群或录屏需求的人群。 Stars 数64,323Forks 数8413 主要特点推流：OBS Studio 支持将视频实时推流至多个平台，如 YouTube、…...

编程日记 2025/6/28 22:01:55

邂逅Node.js

首先先要来学习一下nodejs的基础（和后端开发有联系的） 再然后的学习路线是学习npm，yarn，cnpm，npx，pnpm等包管理工具然后进行模块化的使用，再去学习webpack和git（版本控制工具&…...

编程日记 2025/7/16 1:51:27

React 常见的陷阱之（如异步访问事件对象）

文章目录前言1. 异步访问事件对象问题解决方案 2. 事件传播的误解**问题**解决方案 **3. 事件监听器未正确卸载****问题****解决方案** **4. 动态列表中的事件绑定****问题****解决方案** **5. 第三方库与 React 事件冲突****问题****解决方案** **6. 表单输入与受控组件****问…...

编程日记 2025/7/17 16:23:41

LinkedList demo 内部类讲说 1. Node节点2.MyLinkedList3. LinkedListTest 测试类 1. Node节点 public class Node<T> {private Node<T> pre;private Node<T> next;private T data;public Node() {}public Node getPre() {return pre;}public void setPre(N…...

编程日记 2025/7/16 21:43:27

Sql刷题日志（day9)

一、笔试 1、limit offset：分页查询 SELECT column1, column2, ... FROM table_name LIMIT number_of_rows OFFSET start_row; --跳过前 start_row 行，返回接下来的 number_of_rows 行。 2、lag、lead：查询前后行数据 --lag函数用于访问当…...

编程日记 2025/7/7 22:32:02

46 python pandas

Pandas是Python数据分析的利器，也是各种数据建模的标准工具一、什么是pandas pandas 是 Python 中用于数据处理和分析的核心库，提供了高效的数据结构（如Series和DataFrame）和数据操作工具，广泛应用于数据清洗、分析、可视化等场景。最常用的是用来处理excel数据。二…...

编程日记 2025/7/10 5:07:11

告别延迟！Ethernetip转modbustcp网关在熔炼车间监控的极速时代

熔炼车间热火朝天，巨大的热风炉发出隆隆的轰鸣声，我作为一名技术操控工，正密切关注着监控系统上跳动的各项参数。这套基于EtherNET/ip的监控系统，是我们车间数字化改造的核心，它将原本分散的控制单元整合在一起&#x…...

编程日记 2025/7/17 1:13:39

Prompt Tuning：高效微调大模型的新利器

Prompt Tuning（提示调优）是什么 Prompt Tuning（提示调优）是大模型参数高效微调（Parameter-Efficient Fine-Tuning, PEFT）的重要技术之一，其核心思想是通过优化连续的提示向量（而非整个模型参数）来适配特定任务。以下是关于 Prompt Tuning 的详细解析：一、核心概念…...

编程日记 2025/7/17 16:13:03

⼆叉搜索树详解

1. ⼆叉搜索树的概念⼆叉搜索树⼜称⼆叉排序树，它或者是⼀棵空树，或者是具有以下性质的⼆叉树: • 若它的左⼦树不为空，则左⼦树上所有结点的值都⼩于等于根结点的值 • 若它的右⼦树不为空，则右⼦树上所有结点的值都⼤于等于根结…...

编程日记 2025/7/9 5:04:35

CompleteableFuture的异步任务编排

为什么会有CompleteableFuture Java 的 1.5 版本引入了 Future，可以把它简单的理解为运算结果的占位符， 它提供了两个方法来获取运算结果。 get()：调用该方法线程将会无限期等待运算结果。get(longmeout, TimeUnit unit)：调用该…...

编程日记 2025/7/17 12:34:48

珈和科技贺李德仁院士荣膺国际数字地球学会会士：以时空智能赋能可持续发展目标绘就数字地球未来蓝图

4月22日，第十四届国际数字地球会议在重庆盛大启幕。在这场在全球范围内数字地球领域具有国际影响力的学术盛会上，国际数字地球学会向珈和科技的企业顾问，2023年度国家最高科学技术奖得主李德仁院士授予了“国际数字地球学会会士”最高荣誉称号…...

编程日记 2025/7/15 5:17:45

【CodeBuddy 】从0到1，打造一个“牛马打鸡血仪”

【CodeBuddy 】从0到1，打造一个“牛马打鸡血仪” 我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 🌟嗨，我是LucianaiB&#…...

编程日记 2025/7/11 8:19:07

BI是什么意思？一文讲清BI的概念与应用！

目录一、BI 是什么意思 1. BI 的定义 2. BI 的发展历程 3. BI 的核心组件二、BI 的应用场景 1. 销售与市场营销 2. 财务管理编辑3. 人力资源管理 4. 生产与运营管理编辑三、选择合适的 BI 工具 1. 考虑企业的需求和规模 2. 评估工具的功能和性能 3. 关注工…...

编程日记 2025/7/15 9:40:46

可编辑PPT | 华为安全架构设计方法指南华为数字化转型架构解决方案

这份文档是华为的安全架构设计方法指南，它详细介绍了安全架构设计的重要性、方法和流程。文档强调安全架构是软件研发技术体系中的关键DFX能力，与可靠性、性能等并列，尤其在云计算和复杂网络环境下，安全性设计显得尤为重要。华为的…...

编程日记 2025/7/16 9:17:25

1.6 提示词工程（二）

目录 3.2 提供参考文本 3.2.1 使用参考文本来构建答案 3.2.2 指导模型用引用的文本回答问题 3.3 把复杂的任务拆分成简单的子任务 3.3.1 利用意图分类确定与用户查询最相关的指令 3.3.2 针对需要长时间对话的应用程序，应概括或过滤之前的对话内容 …...

编程日记 2025/7/15 22:29:27

WIFI信号状态信息 CSI 深度学习之数据集

Building occupant activity sensing dataset based on WIFI CSI（WiSA） 所有的数据以及实验参数都上传到了figshare中并配备详细说明，供参考。论文链接：WiSA: Privacy-enhanced WiFi-based activity intensity recognition in …...

编程日记 2025/7/17 14:55:36

基于服务器的 DPI 深度分析解决方案

一、传统网络流量分析的瓶颈与挑战在企业网络管理体系中，传统流量分析模式高度依赖网络设备作为数据采集核心节点，无论是基于 NetFlow/IPFIX 等流协议的流量分析，还是通过端口镜像技术实现的流量监控，均以交换机、路由器等网络设…...

编程日记 2025/7/11 8:31:30

动态规划（5）：线性动态规划

引言所谓线性动态规划，通常指状态定义和转移具有线性结构的动态规划问题，其状态通常可以用一维数组表示，状态转移主要依赖于相邻或前面有限个状态。这类问题的特点是状态空间呈线性排列，每个状态只与有限个前置状态相关，使得问题结构相对简单，更容易理解和掌握。一维…...

编程日记 2025/7/14 14:55:12

c语言- 如何构建CMake项目（Linux/VSCode）

目录 linux（vscode）构建C语言CMake项目 1. 检查linux是否下载cmake，否则执行下列代码 2. 在vscode下载cmake的插件CMake Tools 3. 构建项目（项目结构） 4. 进行cmake配置 1. 在VS Code中按下ctrl shift p键&…...

编程日记 2025/7/17 7:17:50

HJ17 坐标移动【牛客网】

文章目录零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码零、原题链接 HJ17 坐标移动一、题目描述二、测试用例三、解题思路基本思路： 这题的难点在于理解题目和如何处理各种情况。题目是给定一串指令，首先要判断指令是否合法…...

编程日记 2025/7/17 5:19:03

HGHAC集群滚动扩展或更换硬盘设备

文章目录环境文档用途详细信息环境系统平台：N/A 版本：4.5.8 文档用途集群版本：hghac4.2.1 数据库版本：hgdb-see-4.5.8 此步骤适用于所有hac架构的hgdb集群。主要用途：HAC集群服务器滚动扩展或更换硬盘本文…...

编程日记 2025/7/7 21:30:31

虚拟环境中VSCode运行jupyter文件

用VS Code打开jupyter文件，点击右上角 Select Kernel 在正上方会出现这个选择框，选择 Python Environment 会出来所有的虚拟环境，选择要用的环境行...

编程日记 2025/7/3 17:51:45

【蓝桥杯嵌入式】【模块】六、PWM相关配置及代码模板

1. 前言最近在准备16届的蓝桥杯嵌入式赛道的国赛，打算出一个系列的博客，记录STM32G431RBT6这块比赛用板上所有模块可能涉及到的所有考点，如果有错误或者遗漏欢迎各位大佬斧正。本系列博客会分为以下两大类： 1.1. 单独模块的讲…...

编程日记 2025/7/10 5:22:01

力扣-盛最多水的容器

1.题目描述 2.题目链接 11. 盛最多水的容器 - 力扣（LeetCode） 3.题目解析题目中的储水量两边差*短边高度。也就是说，两条边中，决定储水量的是短边的高度。我们可以定义两个指针，一个在最左边，一个在…...

编程日记 2025/7/15 17:28:49

数据实时同步：inotify + rsync 实现数据实时同步

1 数据实时同步在生产环境中，某些场景下，要将数据或文件进行实时同步，保证数据更新后其它节点能立即获得最新的数据。数据同步的两种方式 PULL：拉，使用定时任务的方式配合同步命令或脚本等，从指定服务…...

编程日记 2025/7/16 22:05:24

相关文章：