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

本文主要是介绍漏刻有时数据可视化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);

@漏刻有时

这篇关于漏刻有时数据可视化Echarts组件开发(43)水球图svg温度计动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/175139

相关文章

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

SpringValidation数据校验之约束注解与分组校验方式

《SpringValidation数据校验之约束注解与分组校验方式》本文将深入探讨SpringValidation的核心功能,帮助开发者掌握约束注解的使用技巧和分组校验的高级应用,从而构建更加健壮和可... 目录引言一、Spring Validation基础架构1.1 jsR-380标准与Spring整合1

MySQL 中查询 VARCHAR 类型 JSON 数据的问题记录

《MySQL中查询VARCHAR类型JSON数据的问题记录》在数据库设计中,有时我们会将JSON数据存储在VARCHAR或TEXT类型字段中,本文将详细介绍如何在MySQL中有效查询存储为V... 目录一、问题背景二、mysql jsON 函数2.1 常用 JSON 函数三、查询示例3.1 基本查询3.2

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

SpringBatch数据写入实现

《SpringBatch数据写入实现》SpringBatch通过ItemWriter接口及其丰富的实现,提供了强大的数据写入能力,本文主要介绍了SpringBatch数据写入实现,具有一定的参考价值,... 目录python引言一、ItemWriter核心概念二、数据库写入实现三、文件写入实现四、多目标写入

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

使用Python将JSON,XML和YAML数据写入Excel文件

《使用Python将JSON,XML和YAML数据写入Excel文件》JSON、XML和YAML作为主流结构化数据格式,因其层次化表达能力和跨平台兼容性,已成为系统间数据交换的通用载体,本文将介绍如何... 目录如何使用python写入数据到Excel工作表用Python导入jsON数据到Excel工作表用