echarts——环形图

news2024/11/25 22:52:08

在这里插入图片描述

const value_ze = 60
const value2_ze = 30
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
	title: {
		text: `目标完成率`,
		subtext: [`{a|${value_ze}}`, '{b|%}'].join(''),

		itemGap: 10,
		textStyle: {
			fontSize: '14',
			color: '#fff',
			fontWeight: 500
		},
		subtextStyle: {
			rich: {
				a: {
					fontSize: '32',
					color: '#fff',
					fontWeight: 500,
					fontFamily: "numStyle"
				},
				b: {
					fontSize: '14',
					color: '#fff',
					padding: [8, 0, 0, 6]
				},
			}
		},
		left: 'center',
		top: '35%',
	},
	grid: {
		top: '0%',
		left: '0%',
		right: '0%',
		bottom: '0%',
		containLabel: true
	},
	visualMap: {
		show: false,
	},
	series: [
		{
			name: '',
			type: 'pie',
			radius: ['94%', '96%'],
			center: ['50%', '50%'],
			itemStyle: {
				label: {
					show: false,
				},
			},
			hoverAnimation: false,
			data: [
				{
					value: 100,
					label: {
						show: false,
					},
					itemStyle: {
						normal: {
							color: "#0b5d75"
						}
					},
				}
			],
		},

		{
			type: 'pie',
			radius: ['76%', '86%'],
			center: ['50%', '50%'],
			data: [
				{
					value: value_ze,
					itemStyle: {
						normal: {
							color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
								{
									offset: 0.25,
									color: '#00dddd' // 0% 处的颜色
								},
								{
									offset: 0.5,
									color: '#2491ff' // 0% 处的颜色
								},
								{
									offset: 0.75,
									color: '#00b7ff' // 0% 处的颜色
								},
								{
									offset: 1,
									color: '#fff' // 100% 处的颜色
								}
							])
						}
					},
				},
				{ value: value2_ze, itemStyle: { color: 'rgba(34, 145, 255, 0.3)' } },
			],

			label: {
				//将视觉引导图关闭
				show: false,
			},
			// 初始化echarts的动画效果
			animationType: 'scale',
			animationEasing: 'elasticOut',
			animationDelay: function (idx) {
				return Math.random() * 200;
			}
		}
	]
};
myChart.setOption(option);

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

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

相关文章

springboot拦截器无法进行属性注入

文章目录 问题描述问题原因问题解决解决方法一解决方法二 总结 问题描述 今天在使用拦截器的时候遇见了一个奇怪的错误,就是在对拦截器进行属性注入的时候为null,具体如下 运行代码出现空指针异常 就是注入的Gson为null,这个问题很奇怪&a…

STM32 HAL库定时器输入捕获SlaveMode脉宽测量

STM32 HAL库定时器输入捕获SlaveMode脉宽测量 SlaveMode模式简介 ✨SlaveMode复位模式:在发生一个触发输入事件时,计数器和它的预分频器能够重新被初始化;同时,如果TIMx_CR1寄存器的URS位为低,还会产生一个更新事件UEV…

SQLSERVER中exec 与 exec sp_executesql 的用法及比较

SQLSERVER 提供 exec 与 exec sp_executesql (2005版本开始)执行动态sql。 一、EXEC 命令有两种用法 1、执行存储过程 exec 存储过程 参数 值 --或 exec 存储过程 值 exec 存储过程 存储过程中的参数参数{接受参数返回值} outputCREATE PROC…

空气净化器触摸屏中应用的电容式触摸芯片

现在人们对于居住环境要求较高,许多家庭会选用空气净化器吸咐污物。那么空气净化器原理是什么?空气净化器工作原理分为两种: 被动式空气净化器原理:是用风机将空气抽入机器,通过内部的滤网过滤空气,起到过滤…

亚马逊气候友好碳中和认证

CLIMATE PLEDGE FRIENDLY AND CARBON NEUTRAL Climate Pledge Friendly气候友好认证,亚马逊推出的气候友好认证是一种自愿性,倡导性的认证。那么这个Climate Pledge Friendly是个什么样的认证,如何才能获得这个气候友好认证标签呢&#xff1…

使用onnx和onnxruntime完成模型部署

模型部署定义 深度学习模型部署是指训练好的模型在特定环境中运行的过程。 模型部署的流水线如下: 使用任意一种深度学习框架来定义网络结构并训练模型训练好的模型的网络结构和参数会被转换成一种只描述网络结构的中间表示(如,onnx、torch…

Shiro 初识

1,了解Shiro Shiro是一个安全框架,主要用于用户认证,访问授权,会话管理,数据加密 2,实践 2.1 创建文件 这个例子没有链接数据库, 所以需要在resources下创建文件shiro.ini shiro.ini内容&am…

Vant源码解析(三)van-stepper步进器

先说下自己的开发思路,然后在对照下vant组件的思路,来查找下自己的不足。 这个步进器有加和减的功能,还有输入的功能,限制最小和最大的功能。 我理解的Vant组件的思路 点击事件都是onTap,根据变量进行判断是加还是减,数…

vuecli5.x 配置图片输出为base64

解释:webpack的默认配置是小于一定的文件大小就要将图片转为base64, 所以尽量将这个阈值调大你的图片就可以转为base64; 当然这种做法不好, 会导致代码文件变大, 不过为了满足需求也没得办法。这年头大家都用 vite 了, 网上没有 vuecli5.x 这方面的记录, 写篇文章记…

腾讯内推 | 互联网大厂内推

分享 WLB、大厂内推,面经、热点新闻,可内推公司90,累计帮助6000 靠谱的内推君 专注于WLB、大厂精选内推,助力每位粉丝拿到满意的Offer! 公司简述 腾讯以技术丰富互联网用户的生活。通过通信及社交平台微信和 QQ 促…

单模光模块和多模光模块有何区别,如何选择?

随着数据中心和5G应用的高速发展,光模块渐渐被越来越多的人所熟知,也得到了广泛应用。我们都知道,光模块可以根据参数类型来区分,如我们经常提到的单模光模块和多模光模块。那你知道单模光模块和多模光模块中的单模和多模分别代表…

基于物联网、移动互联网、一物一码等技术开发的质量溯源系统源码

什么是溯源系统? 溯源系统是物联网、移动互联网、一物一码等技术的整合应用。在产品生产过程中在重要环节可采集产品数据信息并形成产品溯源档案。从而形成产品从原料、生产加工、质量检测、物流运输等环节的信息监控。 溯源系统技术架构 技术架构:spring bootmy…

服务器数据库的防护策略与360后缀勒索病毒解密方法

在当今数字化时代,服务器数据安全面临着越来越多的挑战。其中,勒索病毒攻击就是一种常见的网络威胁之一,最近,很多的公司服务器数据库遭到了360后缀勒索病毒攻击,导致许多重要数据无法读取,一旦企业的数据库…

vue3和tauri直接下载Binary 数组的二进制文件内容到本地

通过发送url请求,直接获取到一个文件的Binary 数组内容,然后通过tauri的api:writeBinaryFile保存文件到本地电脑。 发送请求的时候,要加上响应类型:responseType: ResponseType.Binary 然后等返回的响应内容&#xf…

权限系统就该这么设计,稳的一批!

对于后台管理系统来说,权限功能已经是必不可少的一部分了。如果你用过一些快速开发脚手架,你会发现很多都直接集成了权限功能。把权限功能做成一个通用功能,非常有利于代码的复用。今天就以我的mall电商实战项目为例,来聊聊权限系…

防止重复请求,防止重复点击,解决:使用分布式锁,redisson,setnx简单实例

防止重复请求,解决:使用分布式锁,redisson,简单实例 通常情况下:synchronize在单机下是可以的,在分布式下不适用,nginx做分发到了不同的服务器后,不同的jvm是锁不住的,这…

【C语言进阶篇】常见动态内存分配的这六个错误你必须避免!

🎬 鸽芷咕:个人主页 🔥 个人专栏:《C语言初阶篇》 《C语言进阶篇》 ⛺️生活的理想,就是为了理想的生活! 文章目录 前言💬 常见的动态内存错误1️⃣ 对NULL指针的解引用操作⌨️ 错误原因💻 解决方法&…

MonoDTR Monocular 3D Object Detection with Depth-Aware Transformer 论文学习

论文链接:MonoDTR: Monocular 3D Object Detection with Depth-Aware Transformer 1. 解决了什么问题? 单目 3D 目标检测对于自动驾驶很重要,也很有挑战性。 现有的一些方法通过深度预测网络得到深度信息,然后辅助 3D 检测&…

总结930

之前本打算每天学12h,践行了一周,一天最多也就学11.5h,在时间利用上感觉已经趋于饱和的了。 这个时候,时间统计法应该能发挥它应有的作用了,但就算详细记录每日时间支出,也不能从根本上解决问题。 一味的进行时间上的…

学习记录——语义分割、实时分割和全景分割的区别、几个Norm的区别

语义分割、实时分割和全景分割区别? semantic segmentation(语义分割) 通常意义上的目标分割指的就是语义分割,图像语义分割,简而言之就是对一张图片上的所有像素点进行分类。   语义分割(下图左&#…