echarts指标盘属性概括

news2024/9/29 17:29:28

echarts指标盘属性概括

代码
有模拟数据可以直接使用
const options = {
  animation: true,
  title: {
    top: "35%",
    left: "center",
    // text: "单元测试覆盖度", // 主标题
    itemGap: 15,
    textStyle: {
      // 主标题样式
      color: "#666666",
      fontSize: 16,
      fontWeight: 400,
      fontFamily: "HYXJ",
    },
    subtext: '123' + "%", // 副标题
    subtextStyle: {
      // 副标题样式
      color: "#262626",
      fontSize: 45,
      fontWeight: "bold",
      fontFamily: "HYXJ",
    },
  },
  series: [
    {
      type: "gauge", // 仪表盘图
      startAngle: 220,//左环圈深度
      endAngle: 320,  //右环圈深度
      min: 0,
      max: 100,    //进度最大值
      radius: "100%",
      center: ["50%", "50%"],
      progress: {
        // 进度环
        roundCap: "true",
        show: true,
        width: 15,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                //进度环的渐变色
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(96, 150, 224, 1)", // 100% 处的颜色
              },
            ],
          },
        },
      },
      axisLine: {
        // 背景环
        roundCap: "true",
        lineStyle: {
          width: 15,
          color: [
            // [0, "rgba(112, 137, 171, 0.10)"],
            [1, "#123"],
          ],
        },
      },
      pointer: { show: false },   //是否显示指针
      axisTick: { show: false },   //是否显示小刻度
      splitLine: { show: false },   //是否显示大刻度
      axisLabel: { show: false },    //是否显示刻度数值
      detail: { show: false },      //是否显示百分比
      data: [
        {
          value: 50,
          name: 'SCORE',
          title: {
            offsetCenter: ['0%', '80%']
          },
        }
      ]
    }
  ]
};
效果图

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云端地球联动大疆机场,支撑矿山高效巡检与智能监测

矿产资源是我国的重要战略性资源。近年来,随着矿山开采深度的逐渐增加,露天矿山边坡滑落等灾害频繁发生,威胁人民群众生命与财产安全。因此,对露天矿边坡进行快速、实时、有效的形变监测和预警已成为当前我国矿山防灾与安全生产的…

Python:如何找到列表中给定元素的索引

在Python编程中,我们经常需要找到列表中某个特定元素的位置,也就是它的索引。索引是元素在列表中的位置,从0开始计数。本文将详细讲解如何使用Python来找到列表中给定元素的索引,并通过示例代码来加深理解。 基本原理 Python提供…

二级等保与三级等保的区别有哪些

二级等保和三级等保的区别主要体现在保护能力、安全要求、监管严格程度等方面。以下是根据提供的搜索结果中关于二级和三级等保的具体差异: 1. 保护能力: 二级等保要求信息系统能够防护来自外部小型组织的威胁,发现重要的安全漏洞和事件&…

章十二、数据库(1) —— 概述、MySQL数据库、SQL、DDL、DML、DQL、多表设计

为什么学习数据库: ● 实现数据持久化到本地; ● 使用完整的管理系统统一管理,可以实现结构化查询,方便管理; 一、 数据库概述 ● 数据库 数据库(DataBase)为了方便数据的 存储 和 管理 &…

某塑料科技公司网络与机房监控运维项目

某塑料科技公司是由日本知名株式会社在中国投资的,以从事橡胶和塑料制品业为主的生产制造企业。随着企业信息化建设提速,信息化运用程度不断提高,对网络基础设施的管理也提出了更高要求,因此公司急需上线一款综合运维平台加强对整…

PyQt5 的对话框

文章目录 1. 简介2. 输入对话框3. 文件对话框4. 颜色对话框5. 字体对话框6. 进度对话框 1. 简介 PyQt5中的对话框是一种常见的用户界面组件,用于与用户进行交互并获取用户输入或确认。常见的对话框包括消息框、输入框、文件对话框、颜色对话框等。PyQt5提供了丰富的…

VBA在Excel中登录页面的应用—动态密码设置

https://mp.weixin.qq.com/s?__biz=MzkwMzY1OTIzOA==&mid=2247484420&idx=1&sn=5f98ef156cd6a784f0b1e64eed11ee42&chksm=c093af8df7e4269bdda3ed4adc37ce5f30707760ad42a2e0c6c3278ff0a0c5fcaf890016f9b5&token=1012529499&lang=zh_CN#rd 文章目录 …

.NET Web配置解析WebShell (含工具视频)

01WebPages配置项 在 .NET 应用程序中,"webpages:Enabled" 是一个用于启用或禁用 Web 页面功能的配置项。当它的值为 "true" 时,表示启用了 Web 页面功能,允许在应用程序中使用 .cshtml 或 .vbhtml 文件。而当它的值为 &…

网络 | 应用层-websocket协议报文格式解析

websocket的官方文档为rfc(request for comments),是网络协议的规范文档。它包含了许多计算机世界的核心知识 除了这里的websocket,它里边还包含我们熟知的http,tcp等协议的解析。 websocket协议对应的编号是rfc 6455 websocket协议格式解析 由图可知&a…

信安标委发布16项网络安全国家标准:8项为旧标准替代,8项标准为新发布

1. 背景 根据2024年4月25日国家市场监督管理总局、国家标准化管理委员会发布的中华人民共和国国家标准公告(2024年第6号),全国网络安全标准化技术委员会归口的16项国家标准正式发布。 2. 标准清单 本次国家标准涵盖了信息技术安全评估准则、…

RTT PIN设备学习

获取GPIO编号 GET_PIN(port, pin)#define LED_BLUE_PIN GET_PIN(A, 0)设置引脚模式 void rt_pin_mode(rt_base_t pin, rt_base_t mode);设置引脚电平 void rt_pin_write(rt_base_t pin, rt_base_t value);rt_base_t pin 同上, 为引脚编号,尽量通过宏定…

网络安全(6) 模拟实验 Metasploit 控制并获取Windows 登录HASH、LM Hash和NTLM Hash密文解析

窃取WINDOWS账号密码 系统环境:主机(Windows系统 IP:192.168.126.129),虚拟机(KALI系统 IP:192.168.126.3),两者需要能通过本地网络互通互连。 攻击工具:Metasploit是一…

14:java基础-Tomcat-Web容器

文章目录 面试题Web 容器是什么?HTTP 的本质 面试题 Web 容器是什么? 让我们先来简单回顾一下 Web 技术的发展历史,可以帮助你理解 Web 容器的由来。早期的 Web 应用主要用于浏览新闻等静态页面,HTTP 服务器(比如Apa…

打开IE浏览器自动跳转微软的edge浏览器,取消自动跳转

打开IE浏览器会自动跳转微软的edge浏览器 不想跳转的解决办法 1.Win Q 输入 Internet,点击Internet 选项 2.去掉勾选 启用第三方浏览器扩展,然后就不自动跳转了 3. 完成

解决电脑睡眠后,主机ping不通VMware虚拟机

文章目录 问题解决方法方法一方法二注意 问题 原因:电脑休眠一段时间,再次打开电脑就ping不通VMware虚拟机。 解决方法 方法一 重启电脑即可,凡是遇到电脑有毛病,重启能解决90%问题。但是重启电脑比较慢,而且重启…

Android动态布局framelayout

功能说明 最近碰到一个需求,要求在网页端拖控件,动态配置app控件的模块,大小和位置,显示不同的功能,然后在app大屏展示。 技术难点: 1.动态控件位置和大小难调,会出现布局混乱,位置错…

STL——queue容器【队列】

queue的基本概念&#xff1a; 概念&#xff1a;queue是一种先进先出的数据结构&#xff0c;它有两个出口 queue的构造函数&#xff1a; 构造函数&#xff1a; queue<T>que:采用模板类实现&#xff0c;queue对象的默认构造形式 queue(const queue &que):拷贝构造函…

SpringBoot项目代码反编译、加密

话不多说&#xff0c;直接上干活 1. 引入依赖地址和依赖 在maven的setting.xml中添加 <repositories><repository><id>jitpack.io</id><url>https://jitpack.io</url></repository> </repositories>在需要加密的项目的pom.x…

ORACLE ODA一体机存储节点电源故障的分析处理

近期&#xff0c;某用户的ORACLE ODA一体机在例行机房巡检时出现亮黄灯告警&#xff1b;用户反馈次问题后我们立刻通过远程方式&#xff0c;登陆ODA的控制台进行查看&#xff1b; 对于ODA一体机&#xff08;2个计算节点1个存储节点&#xff09;&#xff0c;计算节点可以通过il…

LabVIEW MEMS电容式压力传感器测试系统

LabVIEW MEMS电容式压力传感器测试系统 随着微电子技术的发展&#xff0c;MEMS&#xff08;微电机系统&#xff09;技术在各个领域得到了广泛应用。MEMS电容式压力传感器以其高灵敏度、小尺寸、低功耗等优点&#xff0c;在微传感器领域占据了重要的地位。然而&#xff0c;这些…