根据数据占比使用canvas画圆弧

最新推荐文章于 2024-07-05 09:30:31 发布

Lan_Lan99

最新推荐文章于 2024-07-05 09:30:31 发布

阅读量600

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_37817251/article/details/82763166

本文介绍如何根据数据占比利用canvas技术绘制圆弧，适用于项目中需要展示百分比或特殊比例的情况。附带实际效果展示及代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目的过程中，除了要显示正常的百分比，有的时候还会要求，按照这种比例进行展示，下面是效果图，接着上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态半圆组成圆环</title>
	</head>
	<body>
		<canvas id="canvasID" style="background: #060F3F;"></canvas>
	</body>
	<script>
		var data = {};//后台返回的数据
		var ringProportion = [];//占圆环比例
		// 处理数据
		function handleData(){
			data = {
				    "sn": null,
				    "rtnCode": "0",
				    "rtnMsg": "OK",
				    "bean": {
				        "total": "6"
				    },
				    "beans": [
				        {
				            "total": "1",
				            "warnType": "分级预警",
				            "ruleName": "一级预警"
				        },
				        {
				            "total": "1",
				            "warnType": "突发预警",