echarts画一个简单的饼图 中间是空的 环有两种颜色一种是底色 一种是百分比的颜色

news2024/10/7 10:17:01

//dom打印出来大概是什么样子下方有个图可以作为参考
ecInit(correctRate, processAnalysisVO.correctRate, (100-processAnalysisVO.correctRate));//如效果图

    //饼图  
	function ecInit(dom, correctRate, errorRate) {
	  	var dom = dom; //就是你要放入的盒子元素
	  	var myChart = echarts.init(dom);
	  	option = {
	    	tooltip: {
	      		show: false,
	      		trigger: 'item',
	      		formatter: "{a} : {c} ({d}%)"
	    	},
	    	title: {
	      		text: correctRate + '%',  //图形标题,配置在中间对应效果图的80%
	      		left: "center",
	      		top: "36%",
	      		textStyle: {
	        		color: "#ffb500",
	        		fontSize: 16,
	        		align: "center"
	      		}
	    	},
	    	series: [
		      	{
		        	type: 'pie',
		        	radius: ['70%', '90%'],  //设置内外环半径,两者差值越大,环越粗
		        	hoverAnimation: false,  //移入图形是否放大
		        	label: {     //对应效果图中的Angular显示与否以及设置样式
		          		// show: true,
		          		// position: 'center',
		          		normal: {
		            		show: true,
		            		position: 'center',
		            		padding: [0, 0, 20, 0],  //设置字angular的边距
		            		fontSize: 16,
		          		}
		        	},
			        labelLine: {
			          	normal: {  //label线不显示
			            	show: false
			          	}
			        },
			        data: [
			          	{                  
			            	value: correctRate,  //对应显示的部分数据即80%
			            		itemStyle: {
			              			normal: {
			                		color: '#ffb500',
			              		}
			            	}
			          	},
			          	{
			            	value: errorRate,
			            	itemStyle: {
			              		normal: {
			                		color: '#f0f2f5'
			              		}
			            	}
			         	}
			        ]
		      	}
	    	]
	  	};
	  	myChart.setOption(option, true);
	}

所谓的底色就是错误的颜色而已

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

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

相关文章

KCC@北京|开源到底带给了我们什么?

KCC,全称 KAIYUANSHE City Community(中文:开源社城市社区)是由开源社发起,旨在让开源社区在每个城市落地生根的地域性开源组织。 自2023年2月份发起以来,我们已经在南京、上海、深圳、北京、硅谷、新加坡、…

postgresql类型转换函数

postgresql类型转换函数 简介CAST 函数to_date 函数to_timestamp 函数to_char 函数to_number 函数隐式类型转换 简介 类型转换函数用于将数据从一种类型转换为另一种类型。 CAST 函数 CAST ( expr AS data_type )函数用于将 expr 转换为 data_type 数据类型;Post…

macOS上开源免费的新闻阅读器SABnzbd

SABnzbd Mac版是一款运行在Mac平台上的开源新闻阅读器,这款阅读器界面简约、功效简单强大,使用SABnzbd时可以帮助使用Python语言编写,让用户使用usenet新闻组更便利,是你阅读新闻的好帮手! SABnzbd具有以下主要特点&a…

Wolfram Mathematica 13 for Mac 数学计算工具

Wolfram Mathematica for Mac是一款功能强大、划时代的科学计算软件。它结合了数字和符号计算引擎、图形系统、编程语言、文本系统以及与其他应用程序的高级连接,在许多功能方面处于世界领先地位,截至2009年,它是使用最广泛的数学软件之一。人…

小小的消火栓 蕴藏着“大智慧”

2023年8月22日14时24分,天津消防救援总队指挥中心接到报警:天津市南开区万兴街道南京路新天地大厦外墙起火。接警后,总队立即调派23个消防站及南开、和平支队全勤指挥部,共计284名消防救援人员、62辆消防车赶赴现场。总队全勤指挥…

4G的机器上申请8G的内存,是否可以成功?

前言 4G的机器上申请8G的内存,是否可以成功?这个问题没有办法,是没有办法进行回答,这个问题要考虑三个前置条件: 操作系统是 32 位的,还是 64 位的?申请完 8G 内存后会不会被使用?…

用canvas做柱状图

<!DOCTYPE HTML> <html><head lang"en"><meta charset"UTF-8"><title>Canvans绘制统计图</title><style>body {text-align: center;}canvas {background: #ddd;}</style> </head><body><h…

为什么磁盘被写保护怎么解除?这篇文章告诉你

磁盘被写保护是指磁盘无法写入或修改数据&#xff0c;这可能会使您的计算机或存储设备无法正常工作。当发现磁盘被写保护时&#xff0c;我们应该怎么做呢&#xff1f;磁盘被写保护怎么解除&#xff1f;这篇文章将带大家了解一下磁盘被写保护的原因和对应的解除方法吧。 ▌为什…

mac使用VsCode远程连接服务器总是自动断开并要求输入密码的解决办法

在mac中使用vscode远程连接服务器&#xff0c;时常会出现自动断开并要求重新输入服务器密码的问题&#xff0c;接下来让我们来解决它&#xff1a; 1、首先&#xff0c;在本地创建公钥&#xff1a; ssh-keygen 这条命令执行之后&#xff0c;出现提示直接回车即可&#xff1b;直…

C语言练习题Day2

今天继续分享C语言刷题练习 一、选择题 1、以下程序段的输出结果是&#xff08; &#xff09; #include<stdio.h> int main() { char s[] "\\123456\123456\t"; printf("%d\n", strlen(s)); return 0; }A: 12 B: 13 C: 16 D: 以上都不对 这题考的…

monorepo更新组件报错,提示“无法加载文件 C:\Program Files\nodejs\pnpm.ps1,因为在此系统上禁止运行脚本”

解决方法&#xff1a; 第一步&#xff1a;管理员身份运行 window.powershell&#xff0c; win x打开powerShell命令框&#xff0c;进入到对应项目路径。 第二步&#xff1a;执行&#xff1a;get-ExecutionPolicy&#xff0c;显示Restricted&#xff0c;表示状态是禁止的; 第…

Win11 电脑的 Win + E 快捷键失效

报的错误信息如下&#xff1a; 该文件没有与之关联的应用来执行该操作。请安装应用&#xff0c;若已经安装应用&#xff0c;请在”默认应用设置"页面中创建关联。 报错原因&#xff1a;系统注册表被改写了导致的出错 解决办法&#xff1a; 1、首先&#xff0c;按键盘上的…

k3s在线快速安装部署

中文文档&#xff1a;快速入门指南 | K3s 一、k3s父节点安装 设置主机唯一名称 hostnamectl set-hostname 192.168.56.105 开放k3s所需端口 6443 51820 和 51821 在线安装主节点 curl -sfL https://rancher-mirror.rancher.cn/k3s/k3s-install.sh | INSTALL_K3S_MIRRORcn…

36. 国庆期间每个品类的商品的收藏量和购买量

文章目录 题目需求思路一实现一题目来源 题目需求 从订单明细表&#xff08;order_detail&#xff09;和收藏信息表&#xff08;favor_info&#xff09;统计2021国庆期间&#xff0c;每个商品总收藏量和购买量。 期望结果如下&#xff08;截取部分&#xff09;&#xff1a; …

WordPress导航主题源码

源码说明&#xff1a; V2.0406 添加搜索自动索引百度热搜关键词 添加首页tab标签模式加载方式切换(ajax加载和普通加载)(首页设置) 修复tab标签ajax加载模式会显示未审核的网址的bug 小屏幕热搜采用水平滚动 优化子主题支持 添加文章分页 添加解决WordPress 429的服务(…

基于HarmonyOS ArkUI实现七夕壁纸轮播

七夕情人节&#xff0c;为了Ta&#xff0c;你打算用什么方式表达爱&#xff1f;是包包、鲜花、美酒、巧克力&#xff0c;还是一封充满爱意的短信&#xff1f;作为程序员&#xff0c;以代码之名&#xff0c;表达爱。本节将演示如何在基于HarmonyOS ArkUI的SwiperController、Ima…

HCIP-HCS华为私有云的使用

1、概述 HCS&#xff08;HuaweiCoudStack&#xff09;华为私有云&#xff1a;6.3 之前叫FusionSphere OpenStack&#xff0c;6.3.1 版本开始叫FusionCloud&#xff0c;6.5.1 版本开始叫HuaweiCloud Stack (HCS)华为私有云软件。 开源openstack&#xff0c;发放云主机的流程&am…

优思学院|偏态分布的平均值和中位数为何会不相等?

在六西格玛课堂中&#xff0c;有同学提出了一个问题&#xff0c;就是偏态分布的平均值和中位数为何会不相等&#xff1f;要回答这类问题&#xff0c;我们必需要先明白平均值和中位数的定义和计算原理&#xff0c;再了解他们在分布中的特性&#xff0c;以形象化的方法来解释。今…

【Java 中级】一文精通 Spring MVC - 转换器(五)

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

day 27 json pyecharts模块

JSON是一种轻量型的数据交互格式&#xff0c;可以按照JSON指定的格式去组织封装数据。 JSON本质上是一个带有特定格式的字符串。 主要功能&#xff1a;json就是一种在各个编程语言流通的数据格式&#xff0c;负责不同编程语言中的数据传递和交互&#xff0c;类似于国际通用语…