当前位置: 首页 > news >正文

echarts 仪表盘进度条 相关配置

在这里插入图片描述

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,//行高},}},

相关文章:

echarts 仪表盘进度条 相关配置

option {series: [{type: gauge,min: 0,//最大值max: 100, //最小值startAngle: 200,//仪表盘起始角度。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。endAngle: -20,//仪表盘结束角度splitNumber: 100, //仪表盘刻度的分割段数itemStyle: {color…...

Simpy:Python之离散时间序列仿真

Simpy:Python之离散时间序列仿真 文章目录 Simpy:Python之离散时间序列仿真简介基本使用语法简单案例在数据中心中的应用案例 简介 下载地址网站: https://pypi.org/project/simpy/ 有关教程网站: https://simpy.readthedocs.…...

连接GaussDB(DWS)报错:Invalid or unsupported by client SCRAM mechanisms

用postgres方式连接GaussDB(DWS)报错:Invalid or unsupported by client SCRAM mechanisms 报错内容 [2023-12-27 21:43:35] Invalid or unsupported by client SCRAM mechanisms org.postgresql.util.PSQLException: Invalid or unsupported by client SCRAM mec…...

汽车标定技术(十四)--标定数据固化方法简介

目录 1.标定数据固化方法 1.1 基于XCP固化 1.2 基于UDS固化 2. 具体实现形式 2.1 CAN...

2024年关键技术发展战略趋势前瞻

技术趋势在不断变化,但总的趋势是技术日益深入人类生活的方方面面,这些趋势可能会对未来的科技发展和人类生活产生深远影响,以下是预计今年将塑造未来的一些关键技术趋势。 更多的人将采用人工智能和机器学习 人工智能(AI)和机器学习(ML)不…...

Java程序设计——GUI设计

一、目的 通过用户图形界面设计,掌握JavaSwing开发的基本方法。 二、实验内容与设计思想 实验内容: 课本验证实验: Example10_6 图 1 Example10_7 图 2 图 3 Example10_15 图 4 设计思想: ①学生信息管理系统&#xff1a…...

three.js Raycaster(鼠标点击选中模型)

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div class"box-right"…...

Springboot整合RocketMQ 基本消息处理

目录 1. 同步消息 2. 异步消息 3. 单向消息 4. 延迟消息 5. 批量消息 6. 顺序消息 7. Tag过滤 导入依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId></dependency> …...

红外传感器深入解析

引言 宇宙间的任何物体只要其温度超过零度就能产生红外辐射&#xff0c;事实上同可见光一样&#xff0c;其辐射能够进行折射和反射&#xff0c;这样便产生了红外技术&#xff0c;利用红外光探测器因其独有的优越性而得到广泛的重视&#xff0c;并在军事和民用领域得到了广泛…...

18、Kubernetes核心技术 - InitContainer(初始化容器)

目录 一、概述 二、使用InitContainer 一、概述 InitContainer即初始化容器&#xff0c;是 K8S官方为我们提供的一个可以用来判断环境是否已经满足运行 Pod 应用前所需要的条件。 比如我们有一个应用&#xff0c;需要部署到Tomcat环境&#xff0c;那么在部署这个应用Pod之前…...

electron进程通信之预加载脚本和渲染进程对主进程通信

主进程和预加载脚本通信 主进程 mian,js 和预加载脚本preload.js,在主进程中创建预加载脚本, const createWindow () > {// Create the browser window.const mainWindow new BrowserWindow({width: 300,height: 300,// 指定预加载脚本webPreferences: {preload: path.j…...

如何有效使用 .gitignore 文件

在任何使用 Git 的软件项目中&#xff0c;.gitignore 文件都是一个必不可少的工具。它帮助开发者定义哪些文件和目录应该被 Git 忽略&#xff0c;从而保持代码库的整洁和管理的简便性。 什么是 .gitignore&#xff1f; .gitignore 文件是一个文本文件&#xff0c;您可以在其中指…...

大数据毕设分享 flink大数据淘宝用户行为数据实时分析与可视化

文章目录 0 前言1、环境准备1.1 flink 下载相关 jar 包1.2 生成 kafka 数据1.3 开发前的三个小 tip 2、flink-sql 客户端编写运行 sql2.1 创建 kafka 数据源表2.2 指标统计&#xff1a;每小时成交量2.2.1 创建 es 结果表&#xff0c; 存放每小时的成交量2.2.2 执行 sql &#x…...

大语言模型训练数据集

大语言模型的数据集有很多&#xff0c;以下是一些常用的&#xff1a; - 中文维基百科&#xff1a;这是一个包含大量中文文本的数据集&#xff0c;可用于训练中文语言模型。 - 英文维基百科&#xff1a;这是一个包含大量英文文本的数据集&#xff0c;可用于训练英文语言模型。 …...

python的课后练习总结4(while循环)

for循环用于针对序列中的每个元素的一个代码块。 while循环是不断的运行&#xff0c;直到指定的条件不满足为止。 while 条件&#xff1a; 条件成立重复执行的代码1 条件成立重复执行的代码2 …….. i 1while i < 5:print(i)i i 11、使用wh…...

Flink Connector 开发

Flink Streaming Connector Flink是新一代流批统一的计算引擎&#xff0c;它需要从不同的第三方存储引擎中把数据读过来&#xff0c;进行处理&#xff0c;然后再写出到另外的存储引擎中。Connector的作用就相当于一个连接器&#xff0c;连接Flink计算引擎跟外界存储系统。Flin…...

Golang leetcode707 设计链表 (链表大成)

文章目录 设计链表 Leetcode707不使用头节点使用头节点 推荐** 设计链表 Leetcode707 题目要求我们通过实现几个方法来完成对链表的各个操作 由于在go语言中都为值传递&#xff0c;&#xff08;注意这里与值类型、引用类型的而区别&#xff09;&#xff0c;所以即使我们直接在…...

Django和Vue项目运行过程中遇到的问题及解决办法

这是我从CSDN上边买来的一个系统的资源&#xff0c;准备在此基础上改成自己的系统&#xff0c;但是在运行项目这一步上都把自己难为了好几天&#xff0c;经过不断的摸索&#xff0c;终于完成了第一步&#xff01;&#xff01;&#xff01; 如果大家也遇到同样的问题&#xff0…...

Single-Image Crowd Counting via Multi-Column Convolutional Neural Network

Single-Image Crowd Counting via Multi-Column Convolutional Neural Network 论文背景人群密度方法过去的发展历史早期方法基于轨迹聚类的方法基于特征回归的方法基于图像的方法 Multi-column CNN用于人群计数基于密度图的人群计数通过几何自适应核生成密度图密度图估计的多列…...

el-cascader隐藏某一级的勾选框及vue报错Error in callback for watcher “options“的解决办法

今天用到饿了么的级联选择器时出现了这个报错Error in callback for watcher “options“: “TypeError: Cannot read propertie ‘level‘ of null,因为需求是在不同类型 el-cascader多选的时候默认是可以勾选所有级的选项的,如下图: 包含级联cascader的options、select的…...

2024美赛数学建模思路A题B题C题D题E题F题思路汇总 选题分析

文章目录 1 赛题思路2 美赛比赛日期和时间3 赛题类型4 美赛常见数模问题5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 美赛比赛日期和时间 比赛开始时间&#xff1a;北京时间2024年2月2日&#xff08;周五&#xff…...

C++ 常用设计模式

一、工厂模式 from&#xff1a;C开发常用的设计模式及其实现详解 - 知乎 摘抄&#xff1a; 简单工厂、工厂、抽象工厂&#xff1a; 简单工厂需要工厂内部判断&#xff0c;而工厂模式不需要修改工厂类&#xff1a; 抽象工厂&#xff1a; 接上图&#xff1a; 未完待续.........

高性价比的高速吹风机/高速风筒解决方案,基于普冉单片机开发

高速吹风机是近些年非常火的一款产品&#xff0c;快速崛起并颠覆了传统吹风机&#xff0c;高速吹风机也成为了传统吹风机替代的一个大趋势。高速吹风机是利用高转速产生的大风量来快速吹干头发&#xff0c;由于其精巧的外观设计、超低的噪声、出色的干发效果&#xff0c;高速吹…...

toRefs的用法

文章目录 toRefs是什么toRefs的作用以及为什么要用它&#xff1f; toRefs是什么 toRefs 是 Vue 3 Composition API 中的一个函数&#xff0c;它用于将响应式对象转换为普通对象&#xff0c;其中对象的每个属性都是 ref 对象。这是因为在 Vue 3 中&#xff0c;reactive 创建的对…...

MySQL基础篇(三)约束

一、概述 概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 目的&#xff1a;保证数据库中数据的正确、有效性和完整性。 分类&#xff1a; 注意&#xff1a;约束是作用于表中字段上的&#xff0c;可以在创建表/修改表的时候添加约束。 二…...

Java进阶 1-2 枚举

目录 常量特定方法 职责链模式的枚举实现 状态机模式的枚举实现 多路分发 1、使用枚举类型实现分发 2、使用常量特定方法实现分发 3、使用EnumMap实现分发 4、使用二维数组实现分发 本笔记参考自&#xff1a; 《On Java 中文版》 常量特定方法 在Java中&#xff0c;我们…...

一个人最大的内驱力是什么?

1、不因为孤独或外界压力而降低「生活标准“」的能力。 ”因为寂寞去约炮“、“因为家里催婚匆忙结婚“、”因为没谈过恋爱随便找个人交往。 “你的每一次选择都是在为自己想要的世界而投的票&#xff0c;往后余生是幸福还是悲剧&#xff0c;就是在这一次次 的将就与坚持死磕中…...

解决方法:公众号的API上传素材报错40005

公众号的API上传素材报错40005 Error uploading file : {"errcode":40005,"errmsg":"invalid file type hint: [YOkxGA0122w487] rid: 223442-323247e7bd5-5d75322d88"}上传错误原因分析&#xff1a; 之前成功的示例&#xff0c;文件名为"…...

音量控制软件sound control mac功能亮点

sound control mac可以帮助用户控制某个独立应用程序的音量&#xff0c;通过每应用音量&#xff0c;均衡器&#xff0c;平衡和音频路由独立控制每个应用的音频&#xff0c;还有整个系统的音量。 sound control mac功能亮点 每个应用程序的音量控制 独立控制应用的数量。 键盘音…...

Spring Boot 生产就绪中文文档-下

本文为官方文档直译版本。原文链接 由于篇幅较长&#xff0c;遂分两篇。上半部分中文文档 Spring Boot 生产就绪中文文档-下 度量标准入门受支持的监控系统AppOpticsAtlasDatadogDynatracev2 API自动配置手动配置 v1 API (旧版)与版本无关的设置 ElasticGangliaGraphiteHumioIn…...

男给女做性按摩网站/推推蛙品牌策划

今天和大家分享中继器版商品分类卡片的原型模板&#xff0c;该原型模板由中继器制作&#xff0c;使用时只需要填写好中继器表格&#xff0c;即可自动生成交互效果 【原型预览及下载地址】 https://axhub.im/ax9/b8494994420eef04/#g1 【原型效果】 【Axure高保真原型】商品分…...

06627网页制作和网站建设/深圳网络推广seo软件

2019独角兽企业重金招聘Python工程师标准>>> 这两天需要用到MyBatis的代码自动生成的功能&#xff0c;由于MyBatis属于一种半自动的ORM框架&#xff0c;所以主要的工作就是配置Mapping映射文件&#xff0c;但是由于手写映射文件很容易出错&#xff0c;所以可利用MyB…...

一流的购物网站建设/国际最新新闻

文章目录1 introduction2 evaluation题目&#xff1a;TENET: A Framework for Modeling Tensor Dataflow Based on Relation-centric Notation时间&#xff1a;2021会议&#xff1a;ISCA研究机构&#xff1a;北大 1 introduction 如何描述数据流&#xff1f; 本文总结了三种形…...

福建省建设职业管理中心网站/最新长尾关键词挖掘

本文实例为大家分享了java递归输出树形菜单的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下首先我们要建立树节点的类&#xff1a;package com.tree;public class Node {private Integer id;private Integer parentId;private String name;private String link;publ…...

企业信息公示查询系统官网/seo站长查询

2023前端面试题------JS面试题三. JS高频面试题1. 介绍JS有哪些内置对象&#xff1f;2. 如何最小化重绘(repaint)和回流(reflow)&#xff1f;3. Javascript作用域链?4. 数据请求5. 跨域和同源策略6. 面向对象7. 闭包8. 数组去重9. 数组常用的合并方法10. cookie和session11. 线…...

新手建站教程视频/网络网站推广选择乐云seo

一、抽象工厂模式简介&#xff08;Bref Introduction&#xff09; 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;&#xff0c;提供一个创建一系列相关或者相互依赖对象的接口&#xff0c;而无需制定他们的具体类。优点是&#xff1a;易于交换产品系列&#xf…...