Echarts仪表盘自定义数值样式

news2024/11/26 4:34:05

需求描述

原图样式
在这里插入图片描述
需求样式
在这里插入图片描述

解决方案

{
    name: '数值',
    type: 'gauge',
    startAngle: 180,
    endAngle: 0,
    radius: '30%',
    center: ['50%', '55%'], // 默认全局居中  
    min: 0,
    max: 4,
    zlevel: 2,
    splitNumber: 0,
    axisLine: { // 坐标轴线  
        lineStyle: {
            color: [
                [1, ]
            ], // 属性lineStyle控制线条样式  
            width: '1%'
        }
    },

    axisLabel: { // 坐标轴小标记  
        show: false
    },
    splitLine: { // 分隔线  
        lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式  
            width: 0
        }
    },
    pointer: { // 分隔线 指针  
        show: 0
    },
    detail: {
        valueAnimation: true,
        formatter: '{title|50}' +' {value|家}',
        offsetCenter: [0, '-20%'],
        rich: { //特定样式
            title: {
                fontSize: 30,
                fontWeight: 'bolder',
                color:"#2EDEFF",
                verticalAlign: "bottom"
            },
            value: {
                fontSize: 16, 
                fontWeight: 'bolder',
                color: '#29CDED',
                verticalAlign: "middle"
            },
        },
    },
    data: [{
        name: "",
        value: 1.9
    }]
},

参考

https://echarts.apache.org/zh/option.html#series-gauge.detail.rich

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

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

相关文章

TSINGSEE视频智能分析系统AI算法针对遛狗不拴绳行为的监管方案

一、背景与需求 近期,一则恶犬咬伤女童的新闻上了热搜,因为狗主人没有给狗拴绳,导致小区内一女童被大型犬撕咬,女童全身多处咬伤,已入院治疗。该新闻曝出后立刻引发社会关注。遛狗不拴绳行为也再一次引发热议。因为狗主…

spring基础,编写第一个程序

spring基础 前言SpringSpring概述Spring的8大模块Spring特点学习spring6软件版本Spring的入门程序第一个Spring程序 小结 前言 控制反转,是面向对象编程中的一种设计思想,可以用来降低代码之间的耦合度,符合依赖倒置原则。 控制反转的核心是…

06、SpringBoot+微信支付 -->商户定时查订单状态、用户取消订单(关闭订单API)、查询订单API--到微信支付平台查询订单

目录 Native 下单、取消订单订单功能完善需求1:商户定时查单前端代码:后端代码:测试:swagger 测试: 需求2:用户取消订单(关闭订单API)需求:代码:前端&#xf…

Linux安装Python3.10与部署flask项目实战详细记录

java开发新手入门Python,创建flask后端服务对外提供访问.记录一下在阿里云服务器部署flask项目的操作过程,简单介绍一下使用的阿里云服务器系统配置:ubantu16.04,其他内核版本操作部分命令会有所区别,下面开始详细操作过程! 1.pycharm创建flask项目并打包 2.Python3.…

grafana 密码忘记怎么重置

1.重置密码的命令: grafana-cli admin reset-admin-password 新的密码

【JavaEESpring】Spring, Spring Boot 和Spring MVC的关系以及区别

Spring, Spring Boot 和Spring MVC的关系以及区别 Spring:简单来说,Spring 是一个开发应用框架,什么样的框架呢?轻量级、一站式、模块化,其目的是用于简化企业级应用程序开发 Spring的主要功能: 管理对象, 以及对象之…

收银系统有哪些分类 收银软件有哪些类型

收银系统有以下这几种分类,你都清楚么: 一、按是否能数据共享可分为:单机版收银系统、网络版收银系统 这里需要注意,很多地方说单机也能收银,其实单机和网络版只是数据存储地方不同,单机版需要在线收银还是…

2023第六届泰迪杯数据分析,第五届泰迪杯数据分析技能赛B题源码图片分享

需要B题源码以及第六届带队”指导“请私信本人,团队包含技能赛双一等,数学建模省一,泰迪杯挖掘国一,研究生队友。 去年一等作品可视化图如下,私信获取源码

javaSE学习笔记(五)集合框架-Collection,List,Set,Map,HashMap,Hashtable,ConcurrentHashMap

目录 四、集合框架 1.集合概述 集合的作用 集合和数组的区别 集合继承体系 数组和链表 数组集合 链表集合 2.Collection 方法 集合遍历 并发修改异常 3.List List集合的特有功能(核心是索引) 集合遍历 并发修改异常产生解决方案ListIterato…

在虚拟机中新安装的Linux无法联网解决办法

1、我们在虚拟机中新安装了linux,默认是无法连接网络的,这个时候,需要配置自动获取ip的网设置。 2、我们在VMware Workstatio需要配置net网络,如下图 3、进入linux系统,找到 /etc/sysconfig/network-scripts/ [rootn…

腾讯待办关停怎么办?可将导出的ics文件添加到手机待办APP中

有不少网友之前一直使用微信中的“腾讯待办”小程序来记录待办事项并设置定时提醒时间,但是最近一段时间在使用腾讯待办的时候,却发现主页弹出了“业务关停通知”,主要内容是:由于业务发展方向调整,腾讯待办将于2023年…

下载文本标注工具doccano遇到的报错以及解决方案

下载文本标注工具doccano遇到的报错以及解决方案 最近在用doccano搭标注平台的时候遇到了一些问题,总是报错,下面记录一下 pip install doccano首先检查python版本得是3.9,否则会报错 报错信息如下: ERROR: No matching distribution fou…

个人网厅——销户

目录 需求文档 公积金销户类 controller层 service层 service层实现类 1.验证 (个人账户) 2.提交(添加) controller层 service层 service层实现类 3.分页查询 controller层 service层 service层实现类 4. 详情查询…

知了汇智主题讲座走进四川轻化工大学

2011年,Netscape创始人马克安德森一句“软件正在吞噬世界”掀起热浪,随着云计算、大数据、人工智能等技术的日趋成熟,我们发现吞噬当下世界的是数字化技术,而非软件。 数字化技术一方面改变着国家、企业、个人之间的竞争规则&…

U-Mail邮件系统安全登录解决方案

企业邮箱是企业对内对外商务往来的主要通信工具,并且企业邮箱里面还包含了大量企业内部隐私信息、商业机密等,很容易成为黑客的攻击目标。其中邮件盗号是企业邮箱遭受攻击的主要形式,一旦企业邮箱密码被黑客盗取,黑客不仅可以利用…

自主可控的半导体ic测试系统-国产化替代方案ATECLOUD

在当今高速发展的科技时代,半导体和集成电路(IC)已成为推动世界进步的核心驱动力。为了确保半导体/IC在性能、质量和可靠性方面达到最高标准,我们提供一套全面、创新的测试解决方案,以满足不断变化的市场需求。 利用我公司自主研发的ATECLOU…

银行转账p图在线制作生成,回执单凭证,工商农业邮政建设,易语言画板!

小编这边用易语言画板实现了一个可以自动P银行回执单的软件,当然我加了水印的,生成的图片都有水印,防止被恶意利用,然后可以选择模版,通过单选框的方式,生成的是转账成功后的截图奥,在编辑框输入…

Mysql--高级(自定义函数、存储过程、视图、事务、索引)

自定义函数 语法 delimiter $$ create function 函数名称(参数列表) returns 返回类型 begin sql语句 end $$ delimiter ; 说明: delimiter用于设置分割符,默认为分号,主要用于命令行,在“sql语句”部分编写的语句需要以分号结尾,此时回车会…

探秘亚马逊云科技海外服务器 | 解析跨境云计算的前沿技术与应用

目录 一、什么是海外服务器 二、不同主流海外云服务器对比 三、海外服务器的创建(亚马逊为例) 四、个人总结 一、什么是海外服务器 亚马逊云科技海外服务器:指的是部署在世界各地的亚马逊数据中心中的服务器设备。这些服务器提供了计算、存储、数据库、网络等各…

基于RK3568的内部定时器应用示例

1. 内部定时器介绍 内核定时器是内核用来控制在未来某个时间点(基于jiffies)调度执行某个函数的一种机制,其实现位于kernel/linux/timer.h和kernel/timer.c 文件中。 被调度的函数肯定是异步执行的,它类似于一种“软件中断”&am…