echarts仪表效果

option = {series: [{type: 'gauge',radius:'90%',center: ['50%', '57%'],splitNumber: 5, //仪表盘刻度的分割段数itemStyle: {color: '#6EBEFF', //颜色},progress: {show: true,roundCap: true, //是否在两端显示成圆形width: 3  //表盘原型环阴影宽度},axisLine: {roundCap: true, //是否在两端显示成圆形lineStyle: {width: 3  //表盘圆型环宽度}},axisTick: {show: false   //秒刻度},splitLine: {length: 3,  //刻度线长度distance: 0, //刻度线距离圆环的距离lineStyle: {width: 1,  //刻度线宽color: '#fff' //刻度线颜色}},axisLabel: {distance: -21,  //仪表盘数字定位color: '#fff',  //仪表盘数字颜色fontSize: 12  //仪表盘数字大小},anchor: {show: true,showAbove: true,size: 10,   //表盘圆内心大小},title: {show: true,offsetCenter: [0, '75%'],   //表盘动态数值距离圆心的位置color: '#F3D824',  //仪表盘数字颜色fontSize: 20,  //仪表盘数字大小fontWeight: 'bold', },pointer:{show:true,length: "50%",      // 指针长度width: 2,          // 指针宽度itemStyle: {     // 仪表盘样式color: '#fff', // 指针颜色,默认取数值所在的区间的颜色}},detail: {valueAnimation: true,fontSize: 14,    //表盘动态数值文字大小offsetCenter: [0, '50%'],   //表盘动态数值距离圆心的位置color:'#fff',  //表盘文字颜色formatter:'{value}%'  //value自定义},data: [{value: this.instrumentDataList[0].value,    //表盘动态数值name:this.instrumentDataList[0].name,}]},{type: 'gauge',radius:'75%',  //内圆环center: ['50%', '57%'],itemStyle: {color: '#fcc129', //颜色shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色shadowBlur: 10, //图形阴影的模糊大小shadowOffsetX: 2, //阴影水平方向上的偏移距离shadowOffsetY: 2 //阴影垂直方向上的偏移距离},progress: {show: true,width: 40,  //表盘原型环阴影宽度itemStyle: {color: {type: 'linear',x: 1,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#fce426' // 0% 处的颜色},{offset: 1,color: '#ff0000' // 100% 处的颜色}],global: false // 缺省为 false}}},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},anchor: {show: false },title: {show: false},pointer:{show:false},detail: {show:false},data: [{value: this.instrumentDataList[0].value,    //表盘动态数值name:this.instrumentDataList[0].name,}]}]
};

请添加图片描述

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

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

相关文章

猫头虎分享已解决Bug || Vue3报错: Failed to fetch dynamically imported module

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页: 🐅🐾猫头虎的博客🎐《面试题大全专栏》 🦕 文章图文并茂&#x1f996…

HarmonyOS给应用添加弹窗

给您的应用添加弹窗 概述 在我们日常使用应用的时候,可能会进行一些敏感的操作,比如删除联系人,这时候我们给应用添加弹窗来提示用户是否需要执行该操作,如下图所示: 弹窗是一种模态窗口,通常用来展示用户…

【数据结构和算法】盛最多水的容器

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一:暴力枚举 2.2 方法二:双指针 三、代码 3.1 方法一:暴力…

【VScode】设置语言为中文

1、下载安装好vscode 2、此时可看到页面为英文,为方便使用可切换为中文 3、键盘按下 ctrlshiftP 4、在输入框内输入configure display language 5、选择中文,restart即可(首次会有install安装过程,等待安装成功后重启即可&am…

ISCTF(a)

where_is_the_flag 答案应该被分成了三份了 蚁剑连接看看 第一个 第二个 第三个,在www下 Yunxi{0797d78c-0cb2-4cfb-87e6-f9c102f716f3} 命令执行 POST : 1 system ( tac flag.php ); 1 system ( tac /flag2 ); 1 system ( env ); 1z_Ssql 使用万能密码 后…

初识Dubbo学习,一文掌握Dubbo基础知识文集(3)

🏆作者简介,普修罗双战士,一直追求不断学习和成长,在技术的道路上持续探索和实践。 🏆多年互联网行业从业经验,历任核心研发工程师,项目技术负责人。 🎉欢迎 👍点赞✍评论…

Android Stuido报错处理

仅用作报错记录。防止以后出项问题不知如何解决。 报错1 Dependency‘androidx.annotation:xx requires libraries and applications … 需要修改CompileSDKVersion更改为报错中提示的版本 打开项目build.gradle文件,将compileSdk和targetSdk修改为报错中提示的版…

Vue 详细教程

Vue实战 1. Vue 引言 渐进式 JavaScript 框架 --摘自官网 官网地址:Vue.js - 渐进式 JavaScript 框架 | Vue.js # 渐进式 1. 易用 html css javascript 2. 高效 开发前端页面 非常高效 3. 灵活 开发灵活 多样性 # 总结 Vue 是一个javascript 框架 js 简化页面js操作…

超结MOS/低压MOS在5G基站电源上的应用-REASUNOS瑞森半导体

一、前言 5G基站是5G网络的核心设备,实现有线通信网络与无线终端之间的无线信号传输,5G基站主要分为宏基站和小基站。5G基站由于通信设备功耗大,采用由电源插座、交直流配电、防雷器、整流模块和监控模块组成的电气柜。所以顾名思义&#xf…

【兔子王赠书第12期】赠ChatGPT中文范例的自然语言处理入门书

文章目录 写在前面自然语言处理图书推荐图书简介编辑推荐 推荐理由粉丝福利写在后面 写在前面 小伙伴们好久不见吖,本期博主给大家推荐一本入门自然语言处理的经典图书,一起来看看吧~ 自然语言处理 自然语言处理(Natural Language Process…

程序人生15年人生感悟

计算机程序员并不是一件什么高大上的职业。而仅仅是一份普通的工作。就像医生能治病救人,我们能治蓝屏救程序,我们都在为这个世界默默的做出自己的贡献。刻意或无意宣扬某个职业高大上,其实质是对其它行业从业者的不公平。但是有些人却常常这…

低代码开发平台的优势及应用场景分析

文章目录 低代码是什么?低代码起源低代码分类低代码的能力低代码的需求市场需要专业开发者需要数字化转型需要 低代码的趋势如何快速入门低代码开发低代码应用领域 低代码是什么? 低代码(Low-code)是著名研究机构Forrester于2014…