漏刻有时数据可视化Echarts组件开发(43)水球图svg温度计动画

在这里插入图片描述
SVG是一种用XML定义的语言,用来描述二维矢量及矢量/栅格图形。具体来说,SVG图形是可伸缩的矢量图形,其图像质量不会因放大或改变尺寸而损失。

在SVG中,可以创建和修改图像、对图像进行搜索和索引、对其进行脚本化或压缩。此外,SVG图形是可交互的和动态的,可以在SVG文件中嵌入动画元素或通过脚本来定义动画。

在创建SVG图形的过程中,可以使用各种方法来绘制路径、框、圆、文本和图形图像。例如,通过使用 标签,可以创建具有不同属性(如填充颜色、描边颜色、描边宽度等)的矩形。

引入文件

   <!-- 引入 echarts.js --><script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script><script src="https://iot.qiaodu.net/js/echarts-liquidfill.min.js"></script>

HTML容器

<div id="temp"></div>

配置选项

   //构建DOM容器;function getTemp(data, id) {var myChart = echarts.init(document.getElementById(id));var unit = '℃';var svgPath = 'path://M570,729.5V86.4c0-42.2-31.4-76.4-70-76.4s-70,34.2-70,76.4v643c-41.7,24.3-70,68.9-70,120.6c0,77.3,62.7,140,140,140s140-62.7,140-140C640,798.3,611.7,753.7,570,729.5z';//温度计SVG路径var option = {backgroundColor: '#1d2225',tooltip: {transitionDuration: 0.8,formatter: function (params) {return "当前温度:" + params.data.value * 100 + unit;}},series: [{type: 'liquidFill',radius: '80%',center: ['50%', '50%'],//shape: 'rect', //矩形shape: svgPath,amplitude: '10', //振幅waveLength: '50%',data: data,label: {fontSize: 26,fontWeight: 400,color: '#fff',position: ["50%", "90%"],formatter: function (params) {//console.log(params.data);return parseFloat(params.data.value * 100).toFixed(1) + unit;}},backgroundStyle: {color: 'rgba(255, 255, 255, 1)',},itemStyle: {},outline: {borderDistance: 0, // 边框线与图表的距离 数字itemStyle: {borderWidth: 8, // 边框的宽度borderColor: '#3EC6F0' // 边框颜色}},}]};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}

告警配色

    //获取背景色;function getBgColor(num) {var min = '50', max = '65';if (num > max) {return '#DB2F2C'}if (num >= min && num <= max) {return '#438a7a'}if (num < min) {return '#3EC6F0'}}

函数调用

var timerKpi;var data = [{value: '0.50',itemStyle: {color: '#ff0033'}}];getTemp(data, "temp");clearInterval(timerKpi);setInterval(function () {var tem = parseFloat(Math.random().toFixed(2));var color = getBgColor(tem * 100);var data = [{value: tem,itemStyle: {color: color}}];getTemp(data, "temp");}, 2000);

@漏刻有时

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

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

相关文章

vue3使用element plus的时候组件显示的是英文

问题截图 这是因为国际化导致的 解决代码 import zhCn from "element-plus/es/locale/lang/zh-cn"; 或者 import zhCn from "element-plus/lib/locale/lang/zh-cn";const localezhCn<el-config-provider :locale"locale"><el-date-pic…

Koa学习4:密码加密、验证登录、颁发token、用户认证

请求体 这里遇到了个问题&#xff0c;ctx.request.body 的值是一个字符串。明明已经使用了koa-body中间件 查了一下原因是&#xff1a; ctx.request.body的值可能是一个对象或一个字符串&#xff0c;取决于请求的Content-Type和请求体的格式。 当使用koa-body中间件时&#x…

微信小程序 movable-area 区域拖动动态组件演示

movable-area 组件在小程序中的作用是用于创建一个可移动的区域&#xff0c;可以在该区域内拖动视图或内容。这个组件常用于实现可拖动的容器或可滑动的列表等交互效果。 使用 movable-area 组件可以对其内部的 movable-view 组件进行拖动操作&#xff0c;可以通过设置不同的属…

mp4视频太大怎么压缩变小?

mp4视频太大怎么压缩变小&#xff1f;确实&#xff0c;很多培训和教学都转向了线上模式&#xff0c;这使得我们需要下载或分享大量的在线教学视频。然而&#xff0c;由于MP4视频文件通常较大&#xff0c;可能会遇到无法打开或发送的问题。为了解决这个问题&#xff0c;我们可以…

selenium-webdriver-Chrome新驱动地址(Chrome115及以上版本)

Chrome115、Chrome116、Chrome117&#xff0c;在旧的链接并没有 新地址&#xff1a;https://googlechromelabs.github.io/chrome-for-testing/ 参考学习链接&#xff08;我也是根据这个老师的链接学到的&#xff09;&#xff1a;https://www.cnblogs.com/wuxianfeng023/p/1765…

阿里云 linux tomcat 无法访问方法

1、阿里云放行tomcat端口 例如7077端口号 2、linux 命令行防火墙 设置端口打开 以下命令查看是否开启指定端口 firewall-cmd --list-ports以下命令添加指定端口让防火墙放行 firewall-cmd --zonepublic --add-port3306/tcp --permanent以下命令重新启动防火墙 systemctl re…

《Python 自动化办公应用大全》书籍推荐(包邮送书五本)

前言 随着科技的快速发展和智能化办公的需求增加&#xff0c;Python自动化办公成为了一种趋势。Python作为一种高级编程语言&#xff0c;具有简单易学、功能强大和开放源代码等优势&#xff0c;可以帮助我们更高效地完成日常办公任务。 Python自动化办公还可以帮助我们实现更…

HarmonyOS/OpenHarmony原生应用开发-华为Serverless云端服务支持说明(一)

云端服务的实现是HarmonyOS/OpenHarmony原生应用开发的一个重要的环节&#xff0c;如果用户端是鸿蒙原生应用&#xff0c;但是服务端即云端还是基于传统的各种WEB网络框架、数据库与云服务器&#xff0c;那么所谓的原生应用开发实现的数据即后端服务是和以前、现在的互联网、移…

腾讯云/阿里云国际站免费账号:腾讯云国际站如何对象存储cos设置防盗链

简介 为了避免恶意程序使用资源 URL 盗刷公网流量或使用恶意手法盗用资源&#xff0c;腾讯云国际站给用户带来不必要的损失。腾讯云对象存储支持防盗链配置&#xff0c;建议您通过控制台的防盗链设置配置黑/白名单&#xff0c;来进行安全防护。 注意&#xff1a; 如果您访问对…

mysql 物理备份及恢复

一、物理复制的基本概念 物理备份:直接复制数据库文件&#xff0c;适用于大型的数据库环境&#xff0c;不受存储引擎的限制&#xff0c;但不能恢复到不同的mysql版本 完整备份&#xff1a;也叫完全备份&#xff0c;每次将所有数据&#xff08;不管自第一次备份有没有修改过&…

c++ 基础知识(一)

文章目录 1. C关键字 2. 命名空间 3. C输入&输出 4. 缺省参数 文章内容 1. C关键字(C98) C总计63个关键字&#xff0c;C语言32个关键字 ps&#xff1a;下面我们只是看一下C有多少关键字&#xff0c;不对关键字进行具体的讲解。后面我学了以后再细讲。 2. 命名空间 …

Holographic MIMO Surfaces (HMIMOS)以及Reconfigurable Holographic Surface(RHS)仿真

这里写目录标题 Simulation setupchatgpt帮我总结代码总结&#xff1a;chatgpt生成的代码还是不靠谱&#xff1a;考虑把之前看的RHS中对于多用户的改成单用户全系MIMO与普通MIMO或者说RIS的区别到底是啥&#xff1f; Holographic MIMO Surfaces &#xff08;HMIMOS&#xff09;…

微信小程序--》从模块小程序项目案例23.10.09

配置导航栏 导航栏是小程序的门户&#xff0c;用户进来第一眼看到的便是导航栏&#xff0c;其起着对当前小程序主题的概括。而我们 新建的小程序 时&#xff0c;第一步变开始配置导航栏。如下&#xff1a; 配置tabBar 因为配置tabBar需要借助字体图标&#xff0c;我这里平常喜…

【数据结构】计数排序 排序系列所有源代码 复杂度分析(终章)

目录 一&#xff0c;计数排序 1&#xff0c;基本思想 2&#xff0c;思路实现 3&#xff0c;计数排序的特性总结&#xff1a; 二&#xff0c;排序算法复杂度及稳定性分析 三&#xff0c;排序系列所有源代码 Sort.h Sort.c Stack.h Stack.c 一&#xff0c;计数排序 计数…

厌烦了iPhone默认的热点名称?如何更改iPhone上的热点名称

你对你默认的热点名称感到厌倦了吗&#xff1f;这篇文章是为你准备的。在这里&#xff0c;你可以了解如何轻松更改iPhone上的热点名称。 个人热点会将你的手机数据转换为Wi-Fi信号。手机上的个人热点使用户能够与其他用户共享其蜂窝数据连接。当你在WIFI网络之外时&#xff0c…

使用华为eNSP组网试验⑹-组建基于BGP的网络

BGP(Border Gateway Protocol -- 边界网关协议)是一种在自治系统之间动态交换路由信息、具有丰富的路由控制机制、稳定而安全的路由协议&#xff0c;一般部署在骨干(主要、核心)路由器。 BGP适用于大中型网络的组建&#xff0c;在很多企业当中都有应用。 一般情况下&#xff0c…

网关、网桥、路由器和交换机之【李逵与李鬼】

概念 网关 网关简单来说是连接两个网络的设备,现在很多局域网都是采用路由器来接入网络,因此现在网关通常指的就是路由器的IP。网关可用于家庭或者小型企业,连接局域网和Internet,也有用于工业应用的。 网桥 网桥也叫桥接器,是连接两个局域网的一种存储/转发设备,它能…

Linux搭建我的世界MC服务器 【Minecraft外网联机教程】

目录 前言 1. 安装JAVA 2. MCSManager安装 3.局域网访问MCSM 4.创建我的世界服务器 5.局域网联机测试 6.安装cpolar内网穿透 7. 配置公网访问地址 8.远程联机测试 9. 配置固定远程联机端口地址 9.1 保留一个固定tcp地址 9.2 配置固定公网TCP地址 9.3 使用固定公网…

基于Java的在线文档编辑管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

上门按摩小程序|同城上门按摩软件开发|上门按摩系统;

上门按摩小程序的开发具有许多优势&#xff0c;下面就给大家介绍下按摩小程序功能: 上门按摩小程序的优势 方便快捷&#xff1a;上门按摩小程序提供在线预约服务&#xff0c;用户可以通过手机随时随地预约按摩师上门服务&#xff0c;避免了传统预约方式的繁琐和不确定性。 个性…