echarts 仪表盘进度条 相关配置

news2024/10/3 8:23:13

在这里插入图片描述

option = {
  series: [
    {
      type: 'gauge',
      min: 0,//最大值
      max: 100, //最小值
      startAngle: 200,//仪表盘起始角度。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。
      endAngle: -20,//仪表盘结束角度
      splitNumber: 100, //仪表盘刻度的分割段数
      itemStyle: {
        color: '#58D9F9', //颜色
        shadowColor: 'rgba(0,138,255,0.45)',//阴影颜色
        shadowBlur: 10,//图形阴影的模糊大小
        shadowOffsetX: 2,//阴影水平方向上的偏移距离
        shadowOffsetY: 2,//阴影垂直方向上的偏移距离
      },
      progress: {
        show: true, //是否显示进度条
        roundCap: true,//是否在两端显示成圆形
        width: 18,//进度条宽度
      },
      pointer: {
        show:false,//是否显示指针
      },
      axisLine: {
        show:true, //是否显示仪表盘轴线
        roundCap: true, //是否在两端显示成圆形
        lineStyle: {
          width: 18,//轴线宽度
        }
      },
      axisTick: {
        show:false,//是否显示刻度
      },
      splitLine: {
        show:false,//是否显示分隔线
      },
      axisLabel: {
        show:false,//是否显示标签
      },
      title: {
        show: false,//是否显示标题
      },
      detail: {
        show:true,//是否显示详情
        valueAnimation: true,//是否开启标签的数字动画
        width: '60%',//详情宽度
        lineHeight: 40,//行高
        borderRadius: 8, //文字块的圆角
        offsetCenter: [0, '-5%'],//相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比
        fontSize: 60,//文字的字体大小
        fontWeight: 'bolder',//文字字体的粗细
        formatter: '{value}/100',//格式化函数或者字符串
        color: 'auto',//文本颜色
      },
      data: [
        {
          value: 80
        }
      ]
    }
  ]
};

在这里插入图片描述
将精度条设为渐变色,中间富文本修改样式:只需要修改(进度条progress、详情detail)

在这里插入图片描述

progress: {
                show: true, //是否显示进度条
                roundCap: true,//是否在两端显示成圆形
                width: 18,//进度条宽度
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#4A9FFA' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#47D6DE' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },

detail: {
                show: true,//是否显示详情
                valueAnimation: true,//是否开启标签的数字动画
                width: '60%',//详情宽度
                lineHeight: 40,//行高
                borderRadius: 8, //文字块的圆角
                offsetCenter: [0, '-10%'],//相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比
                fontSize: 60,//文字的字体大小
                fontWeight: 'bolder',//文字字体的粗细
                formatter: '{a|{value}}{b|/100}',//格式化函数或者字符串
                color: 'auto',//文本颜色
                rich: {
                    a: {
                        align: 'center',
                        color: '#3396FE',
                        fontSize: 50,
                        fontWeight: 'normal',//文字字体的粗细
                        borderRadius: 8, //文字块的圆角
                        lineHeight: 40,//行高
                    },
                    b: {
                        align: 'center',
                        color: '#67788A',
                        fontSize: 20,
                        fontWeight: 'bolder',//文字字体的粗细
                        borderRadius: 8, //文字块的圆角
                        lineHeight: 40,//行高
                    },
                }
            },

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

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

相关文章

数据结构之堆——学习笔记

1.堆的简介: 接下来看一下堆的建立; 接下来是如何在堆中插入数据以及删除数据: 大根堆的插入操作类似只是改变了一下大于和小于符号,同时插入操作的时间复杂度为O(logn)。 来看几个问题: 答案当…

关于曲率、曲率半径和曲率圆,看这几篇文章就够啦

关于曲率、曲率半径和曲率圆的内容,是考研数学数学一和数学二大纲中明确要求掌握的内容,但这部分内容在很多教材教辅以及练习题中较少涉及。在本文中,荒原之梦考研数学网就为大家整理了曲率、曲率半径和曲率圆方程相关的概念、基础知识以及练…

从千问Agent看AI Agent——我们很强,但还有很长的路要走

前言 最近双十一做活动买了台新电脑,显卡好起来了自然也开始大模型的学习工作了,这篇文章可能是该系列的第一弹,本地私有化部署千问agent,后面还会尝试一些其他的大模型结合本地知识库或者做行业垂直模型训练的,一步…

【编译原理】期末预习PPT后三章笔记+LL(1) II

继续预习O.o 从这一章开始看自己班发的 PPT 了 LL(1)的部分因为班里发了所以又看了一遍hhh感觉比之前那个清楚一点 目录 I. 自顶向下 一、概念(看一眼) 1、语法分析的两大类分析方法 2、算法基本思想 3、自顶向下介绍 1)一般过程 2&a…

IPv6和IPv4在技术层面的区别

随着互联网的不断发展,IPv4地址资源已经逐渐枯竭,而IPv6地址的使用逐渐成为趋势。IPv6和IPv4作为互联网协议的两个版本,在技术层面存在许多区别。本文将从地址空间、地址表示方法、路由协议、安全性、移动性以及网络性能等方面对IPv6和IPv4进…

【计算机网络】TCP原理 | 可靠性机制分析(一)

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】【Java系列】 本专栏旨在分享学习网络编程、计算机网络的一点学习心得,欢迎大家在评论区交流讨论💌 目…

探索生成式AI:自动化、问题解决与创新力

目录 自动化和效率:生成式AI的颠覆力量 解谜大师生成式AI:如何理解和解决问题 创新与创造力的启迪:生成式AI的无限潜能 自动化和效率:生成式AI的颠覆力量 1. 神奇的代码生成器:生成式AI可以帮助开发人员像魔术一样快…

Linux network — 网络层收发包流程及 Netfilter 框架浅析

Linux network — 网络层收发包流程及 Netfilter 框架浅析 1. 前言2. 基础网络知识2.1 网络分层模型2.2 数据包协议分层2.3 sk_buff 结构2.4 收发包整体框架 3. 网络层(IPv4)收发包流程4. Netfilter 框架4.1 IPv4 网络层的 Netfilter Hook 点4.2 iptable…

jquery图形验证码

效果展示 js图形随机验证码&#xff08;表单验证&#xff09; html代码片段 <form class"formwrap"><div class"item"><input type"text" id"code_input" value"" placeholder"请输入验证码"/>…

【KD】知识蒸馏(knowledge distillation)简单介绍

最近学到了知识蒸馏的相关知识&#xff0c;来简单总结一下૮꒰ ˶• ༝ •˶꒱ა。 知识蒸馏 知识蒸馏&#xff0c;是一种模型压缩的手段。通过训练学生模仿教师的行为&#xff0c;将嵌入在大的教师模型中的知识迁移到小的学生模型。 例如&#xff0c;TinyBERT(Jiao et al.,2…

第14课 利用openCV快速数豆豆

除了检测运动&#xff0c;openCV还能做许多有趣且实用的事情。其实openCV和FFmpeg一样都是宝藏开源项目&#xff0c;貌似简单的几行代码功能实现背后其实是复杂的算法在支撑。有志于深入学习的同学可以在入门后进一步研究算法的实现&#xff0c;一定会受益匪浅。 这节课&#…

sensor 点亮出图后,画面全黑是为什么?

同事在点一个思特威的 sensor sc035hgs&#xff0c;这个 sensor 主要负责数据采集&#xff0c;然后给到后面的 NN&#xff08;神经网络&#xff09;去做处理。 点亮出图后&#xff0c;画面很黑&#xff0c;如下图所示&#xff1a; 因为没拿到板子&#xff0c;只能盲猜&#xf…

案例097:基于微信小程序+PHP的家具购物商城系统

目录 前言 系统展示 管理员模块的实现 用户管理 家具分类管理 家具新品管理 家具广告管理 小程序用户模块的实现 首页 家具信息 我的 代码实现 登录功能实现代码 注册功能实现代码 密码重置功能实现代码 修改信息功能实现代码 删除信息功能实现代码 保存信息…

H266/VVC多样化视频编码工具概述

全景视频编码 全景视频&#xff1a; 具有360度全包围视角的球面视频。 全景视频编码&#xff1a; 包括H266在内的视频编码算法都是以平面视频为对象的&#xff0c;为了采用传统的视频编码编码算法&#xff0c;全景视频需要转换为平面视频&#xff0c;其中经纬图等角映射&#…

深度学习|4.1 深L层神经网络 4.2 深层网络的正向传播

4.1 深L层神经网络 对于某些问题来说&#xff0c;深层神经网络相对于浅层神经网络解决该问题的效果会较好。所以问题就变成了神经网络层数的设置。 其中 n [ i ] n^{[i]} n[i]表示第i层神经节点的个数&#xff0c; w [ l ] w^{[l]} w[l]代表计算第l层所采用的权重系数&#xff…

记一次实战云渗透总结

点击星标&#xff0c;即时接收最新推文 云渗透思路 所谓的云渗透通常指SaaS或PaaS渗透&#xff0c;即将服务器端的某些服务搭建在云服务器上&#xff0c;源代码的开发、升级、维护等工作都由提供方进行。从原理上看&#xff0c;云渗透思路与传统渗透思路相差无几。站点必须由底…

Python中的cls语法

在Python中&#xff0c;cls 是一个用于指代类本身的约定性名称&#xff0c;通常用作类方法&#xff08;class method&#xff09;中的第一个参数。cls 类似于 self&#xff0c;它是对类的引用&#xff0c;而不是对实例的引用。cls 通常在类方法中用于访问类级别的属性和方法。举…

Kafka消息阻塞:拯救面试的八大终极解决方案!

大家好&#xff0c;我是小米&#xff0c;一个对技术充满热情的90后程序员。最近在准备社招面试的过程中&#xff0c;遇到了一个超级有挑战性的问题&#xff1a;“Kafka消息阻塞怎么解决&#xff1f;”今天&#xff0c;我就来和大家一起深入剖析这个问题&#xff0c;分享我在解决…

1-02VS的安装与测试

一、概述 对于一名C语言程序员而言&#xff0c;进行C语言程序的开发一般需要一个文本编辑器加上一个编译器就足够了。但为了方便起见&#xff0c;我们选择使用集成开发环境——Visual Studio&#xff08;简称VS&#xff09;。安装Visual Studio 下面讲一下如何安装VS&#xff0…

找不到mfc110u.dll,是什么原因,五种找不到mfc110u.dll,的解决方法

在日常使用电脑的过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“mfc110u.dll丢失”。那么&#xff0c;什么是mfc110u.dll文件&#xff1f;为什么会出现丢失的情况&#xff1f;本文将为您详细介绍mfc110u.dll文件的作用、丢失原因以及提供5种解决方法…