Echarts 仪表盘实现平均值和实时值

const gaugeData = [{value: 20,name: '互动发起率实时值',title: {offsetCenter: ['-25%', '10%']},detail: {offsetCenter: ['-25%', '18%']}},{value: 40,name: '互动发起平均值',title: {offsetCenter: ['25%', '10%']},detail: {offsetCenter: ['25%', '18%']}},// {//   value: 60,//   name: 'Perfect',//   title: {//     offsetCenter: ['40%', '80%']//   },//   detail: {//     offsetCenter: ['40%', '95%']//   }// }
];
option = {series: [{type: 'gauge',startAngle: 180,endAngle: 0,center: ['50%', '50%'],radius: '90%',min: 0,max: 100,// 仪表盘轴线相关配置axisLine: {// roundCap: true,lineStyle: {width: 6, // 轴线宽度color: [ // 仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示[0.25, '#FF6E76'],[0.5, '#FDDD60'],[0.75, '#58D9F9'],[1, '#7CFFB2']]}},// 表盘中指针的固定点anchor: {show: true,showAbove: true,size: 8,itemStyle: {color: '#FAC858'}},// 仪表盘指针pointer: {icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',width: 4,length: '80%', // 指针长度,可以是绝对数值,也可以是相对于半径的半分比offsetCenter: ['0%', '0%']// icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',// length: '12%',// width: 20,// offsetCenter: [0, '-60%'],// itemStyle: {//   color: 'auto'// }},// progress: {//   show: true,//   overlap: true,//   roundCap: true// },data: gaugeData,// 仪表盘标题title: {fontSize: 14},// 仪表盘详情,用于显示数据detail: {width: 40,height: 14,fontSize: 14,color: '#fff',backgroundColor: 'inherit',borderRadius: 3,formatter: '{value}%'}}]
};
setInterval(function () {gaugeData[0].value = +(Math.random() * 100).toFixed(2);// gaugeData[1].value = +(Math.random() * 100).toFixed(2);// gaugeData[2].value = +(Math.random() * 100).toFixed(2);myChart.setOption({series: [{data: gaugeData}]});
}, 2000);

效果图:
在这里插入图片描述

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

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

相关文章

Java_集合进阶Map实现类

一、Map集合 已经学习了Map集合的常用方法,以及遍历方式。 下面学习的是Map接口下面的是三个实现类HashMap、LinkedHashMap、TreeMap。实际上这三个实现类并没有什么特有方法需要我们学习,它们的方法就是前面学习Map的方法。这里我们主要学习它们的底层…

机器学习——分类评价指标

【说明】文章内容来自《机器学习——基于sklearn》,用于学习记录。若有争议联系删除。 1、评价指标 对于模型的评价往往会使用损失函数和评价指标,两者的本质是一致的。一般情况下,损失函数应用于训练过程,而评价指标应用于测试过…

深入浅出堆排序: 高效算法背后的原理与性能

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《linux深造日志》 《高效算法》 ⛺️生活的理想,就是为了理想的生活! 📋 前言 🌈堆排序一个基于二叉堆数据结构的排序算法,其稳定性和排序效率在八大排序中也…

maven学习和maven聚合工程搭建

1.学习maven maven的概念 项目管理工具 ,对jar进行依赖管理,编译,打包,单元测试,安装,部署,贯穿整个项目 为什么要学maven 要解决的问题: 不同的开发工具开发出来的项目目录结构…

计算机基础:网络基础

目录 一.网线制作 1.制作所需要工具 网线制作标准 ​编辑 2.水晶头使用 3.网线钳使用 4.视频教学 二.集线器、交换机介绍 1.OSI七层模型 2.TCP/IP四层参考模型 3.集线器、交换机。路由器介绍 集线器 交换机 路由器 区别 三.路由器的配置 1.路由器设置 说明书 设…

IDEA版SSM入门到实战(Maven+MyBatis+Spring+SpringMVC) -Spring的AOP前奏

第一章 AOP前奏 1.1 代理模式 代理模式:我们需要做一件事情,又不期望自己亲力亲为,此时,可以找一个代理【中介】 我们【目标对象】与中介【代理对象】不能相互转换,因为是“兄弟”关系 1.2 为什么需要代理【程序中…

【大模型】快速体验百度智能云千帆AppBuilder搭建知识库与小助手

文章目录 前言千帆AppBuilder什么是千帆AppBuilderAppBuilder能做什么 体验千帆AppBuilderJava知识库高考作文小助手 总结 前言 前天,在【百度智能云智算大会】上,百度智能云千帆AppBuilder正式开放服务。这是一个AI原生应用开发工作台,可以…

技术分享-Jenkins

持续集成及Jenkins介绍 软件开发生命周期叫SDLC(Software Development Life Cycle),集合了计划、开发、测试、部署过程。 在平常的开发过程中, 需要频繁地(一天多次)将代码集成到主干,这个叫持…

实力强的大模型都有哪些超能力?

实力强的大模型都有哪些超能力? 前几日,人工智能研究公司OpenAI CEO山姆奥特曼(Sam Altman)在谈及人工智能这项技术的潜力以及人们对它的担忧时,曾表示“AI发展速度快得吓人,就像停不下来的龙卷风。”可见&…

软件测试:最强面试题整理出炉附答案,一点点小总结,建议收藏

一、Web自动化测试 1.Selenium中hidden或者是display = none的元素是否可以定位到? 不能,可以写JavaScript将标签中的hidden先改为0,再定位元素 2.Selenium中如何保证操作元素的成功率?也就是说如何保证我点击的元素一定是可以点…

CMU\谷歌等最新研究综述:面向通用机器人的基础模型

构建能够在任何环境中无缝操作、使用各种技能处理不同物体和完成多样化任务的通用机器人,一直是人工智能领域的长期目标。然而,不幸的是,大多数现有的机器人系统受到限制——它们被设计用于特定任务、在特定数据集上进行训练,并在…

deCasteljau 递推

递推函数 P i r ( t ) ( 1 − t ) P i r − 1 ( t ) t P i 1 r − 1 ( t ) , \begin{equation} \bm{P}_{i}^r (t) (1-t) \bm{P}_{i}^{r-1} (t) t \bm{P}_{i1}^{r-1} (t), \end{equation} Pir​(t)(1−t)Pir−1​(t)tPi1r−1​(t),​​ …

在ClickHouse数据库中启用预测功能

在这篇博文中,我们将介绍如何将机器学习支持的预测功能与 ClickHouse 数据库集成。ClickHouse 是一个快速、开源、面向列的 SQL 数据库,对于数据分析和实时分析非常有用。该项目由 ClickHouse, Inc. 维护和支持。我们将探索它在需要数据准备以…

Java对接腾讯多人音视频房间回调接口示例

在前面我们已经对接好了腾讯多人音视频房间相关内容:Java对接腾讯多人音视频房间示例 为了完善业务逻辑,我们还需要对接它的一些回调接口 官方文档地址 主要就下面这些 这里因为比较简单直接上代码 里面有些工具类和上一章一样这里就没贴,需要…

【高效开发工具系列】eclipse部署web项目

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

15张超级有用的电商模版

电商即电子商务(Electronic Commerce) ,是利用计算机技术、网络技术和远程通信技术,实现电子化、数字化和网络化的整个商务过程。本专题包含电商运营策略、电商平台底层逻辑、营销流程设计等模板内容。 如果你是一个电商小白,你需要以下的电…

大型医院PACS系统源码,影像存储与传输系统源码,支持多种图像处理及三维重建功能

PACS系统是医院影像科室中应用的一种系统,主要用于获取、传输、存档和处理医学影像。它通过各种接口,如模拟、DICOM和网络,以数字化的方式将各种医学影像,如核磁共振、CT扫描、超声波等保存起来,并在需要时能够快速调取…

Enge问题解决教程

目录 解决问题的一般步骤: 针对"Enge问题"的具体建议: 以下是一些普遍适用的解决问题的方法: 以下是一些更深入的Enge浏览器问题和解决办法: 浏览器性能问题: 浏览器插件与网站冲突: 浏览…

新型智慧视频监控系统:基于TSINGSEE青犀边缘计算AI视频识别技术的应用

边缘计算AI智能识别技术在视频监控领域的应用有很多。这项技术结合了边缘计算和人工智能技术,通过在摄像头或网关设备上运行AI算法,可以在现场实时处理和分析视频数据,从而实现智能识别和分析。目前来说,边缘计算AI视频智能技术可…

Leetcode 45 跳跃游戏 II

题意理解: 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。 还是从初始坐标i0的位置到达最后一个元素,但是问题不是能不能跳到,而是最少几步能跳到最后一个元素。 目标&…