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

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

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

相关文章

虾皮怎么选品:虾皮(Shopee)跨境电商业务成功的关键步骤

在虾皮(Shopee)平台上进行跨境电商业务,选品是至关重要的一环。有效的选品策略可以帮助卖家更好地了解市场需求,提高销售业绩和客户满意度。以下是一些成功的选品策略,可以帮助卖家在虾皮平台上取得更好的业务成绩。 先…

算法训练day60|单调栈part0

参考:代码随想录 84.柱状图中最大的矩形 要求当前柱形的左右两边第一个比他小的位置 对于高度为5的柱子(index为2) mid 他的左边第一个比他小的柱子为1,index为1 left 他的右边第一个比他小的柱子高度为2,index为4…

【前端】[vue3] vue-router使用

提示:我这边用的是typeScript语法,所以js文件的后缀都是ts。 安装vue-router: (注意:vue2引用vue-router3 vue3才引用vue-router4) npm install vue-router4src文件夹下面创建 router/index.ts(…

ES -极客学习

Elasticsearch 简介及其发展历史 起源 Lucene 于 Java 语言开发的搜索引擎库类创建于 1999 年,2005 年成为 Apache 顶级开源项目Lucene 具有高性能、易扩展的优点Lucene 的局限性 只能基于 Java 语言开发类库的接口学习曲线陡峭原生并不支持水平扩展原生并不支持水…

软件测试|SQL JOIN的用法,你会了吗?

SQL JOIN 是在关系型数据库中常用的操作,用于将两个或多个表中的数据合并起来,以满足查询需求。本文将介绍 SQL JOIN 的基本概念、不同类型的 JOIN,以及使用示例。 SQL JOIN 的概念 在关系型数据库中,数据通常分布在多个表中&am…

低代码开发会取代传统开发吗? 两者有什么区别 该如何选择

低代码开发技术在近几年逐渐被普及,帮助很大一部分开发者完成了复杂的工作。由于低代码开发方案入门门槛低且上手难度小,所以即使是非专业人士也可借助其便利性自主开发软件系统,整个开发过程几乎不需要专业程序员。久而久之就出现了一种声音…

基于JavaWeb+SSM+Vue四六级词汇微信小程序系统的设计和实现

基于JavaWebSSMVue四六级词汇微信小程序系统的设计和实现 源码获取入口KaiTi 报告Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 KaiTi 报告 (1)课题背景 伴随着社会的快速发展, 现代社…

Git保姆级安装教程

Git保姆级安装教程 一、去哪下载二、安装2.1 具体安装步骤2.2 设置全局用户签名 一、去哪下载 1、官网(有最新版本):https://git-for-windows.github.io/ 2、本人学习时安装的版本,链接:https://pan.baidu.com/s/1uAo…

locust 快速入门--程序调试

背景 对测试的api引入locust后,不在使用requests库进行http请求了,而是通过client属性发送请求,实质是使用HttpSession。 问题:如果对locust程序进行调试 解决方案: 因为locust使用协程,需要开启pych…

解决vue3中watch 监听不到旧值的问题,亲测有效!

问题描述 这个问题是我在公司vue3项目的时候发现的一个问题,watch 在监听对象/数组变量的变化时,发现对象的数据变化时 旧数据 获取到的和新数据是一样的 类似于下面这样 const objref({a:我是原来的值,b:6, })obj.a改变值watch(obj,(nel,old)>{ c…

LeetCode-有效的字母异位词(242)

题目描述: 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词。 注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位词。 思路: 这题还是比较简单的,首先将两个字符…

Typora 编辑器 讲解 包括使用方式 快捷键 附带下载地址 (免费破解)

CSDN 成就一亿技术人! 今天来讲一下很好用的编辑器 Typora CSDN 成就一亿技术人! 什么是Typora? 它是一个 Markdown 编辑器和阅读器,这意味着您可以使用简单的格式代码 (Markdown)是一种轻量级标记语言&…