版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37817251/article/details/82763166
做项目的过程中，除了要显示正常的百分比，有的时候还会要求，按照这种比例进行展示，下面是效果图，接着上代码。
<!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": "突发预警",
" ruleName": "三级预警"
},
{
"total": "3",
"warnType": "突发预警",
"ruleName": "二级预警"
},
{
"total": "1",
"warnType": "突发预警",
"ruleName": "四级预警"
}
],
"object": null
};
// 判断现在有几个数据：当返回 几个数据的时候，圆需要除以几；
var dataBeans = data.beans;
var dataBeansLen = dataBeans.length;//圆分为几份
var dataBeanTotal = data.bean.total;
if(dataBeansLen != "0"){
for(var i=0; i<dataBeansLen; i++){
// --------------------------------------------不能在这里面做数据处理，需要将数据放到数组里，然后在创建圆环中处理
// dataBeans[0].total----------------------------0当此值为0的时候会出现问题
//ringProportion.push(((dataBeans[i].total)/dataBeanTotal)*2);
var eAngle0 = ((dataBeans[0].total/dataBeanTotal)*2)-0.01+1.5;
var sAngle1 = eAngle0+0.01; // 下一个的开始位置是上一个的结束位置
var eAngle1 = ((dataBeans[1].total/dataBeanTotal)*2)+sAngle1-0.01;//下一个的结束位置，是开始位置+圆弧的角度
var sAngle2 = eAngle1+0.01;
var eAngle2 = ((dataBeans[2].total/dataBeanTotal)*2)+sAngle2-0.01;
var sAngle3 = eAngle2+0.01;
switch(i)
{
case 0:
creatRing("red","1.5",eAngle0);
break;
case 1:
creatRing("#E65D07",sAngle1,eAngle1);
break;
case 2:
creatRing("pink",sAngle2,eAngle2);
console.log(sAngle2)
console.log(eAngle2)
break;
case 3:
creatRing("yellow",sAngle3,"1.49");
break;
}
}
}else{
return;
}
};
// 创建圆环
/*
* canavsEleID：canvas标签的id
* strokeColor:圆弧的颜色
* sAngle:圆弧开始的角度
* eAngle：圆弧结束的角度
*
* */
function initRing(strokeColor,sAngle,eAngle){
console.log(ringProportion)
var canavsEle = document.getElementById("canvasID");
var context = canavsEle.getContext("2d");
// 第二部分
context.strokeStyle = "red";
context.lineWidth = 10;
context.beginPath();
context.arc(74,74,60,Math.PI*1.5,Math.PI*1.99,false);
context.stroke();
context.closePath();
// 第四部分
context.strokeStyle = "#F6D707";
context.lineWidth = 10;
context.beginPath();
context.arc(74,74,60,Math.PI*0,Math.PI*0.59,false);
context.stroke();
context.closePath();
// 第四部分
context.strokeStyle = "blueviolet";
context.lineWidth = 10;
context.beginPath();
context.arc(74,74,60,Math.PI*0.6,Math.PI*0.99,false);
context.stroke();
context.closePath();
// 第六部分
context.strokeStyle = "#EE6B14";
context.lineWidth = 10;
context.beginPath();
context.arc(74,74,60,Math.PI*1,Math.PI*1.49,false);
context.stroke();
context.closePath();
};
// 创建圆环
function creatRing(strokeColor,sAngle,eAngle){
var canavsEle = document.getElementById("canvasID");
var context = canavsEle.getContext("2d");
// 第二部分
context.strokeStyle = strokeColor;
context.lineWidth = 10;
context.beginPath();
context.arc(74,74,60,Math.PI*sAngle,Math.PI*eAngle,false);
context.stroke();
context.closePath();
};
// 处理数据
handleData();
// 初始化圆
// initRing();
// 遇到的问题：1、
// 开发过程：
/*
* 开发过程：
* 1、刚开始是定制为4个数据，需要画四个圆弧
* 2、根据不同的开始的位置、结束的位置画出一个圆弧，但是中间没有分割
* 3、为了有分割，需要在每个圆弧结束的位置少画0.01
* 4、总结画圆弧的规律
* 5、考虑当有数据为0时的操作，此时分为三种情况（1）第一个数据为0（2）第二个数据为0（3）中间任意位置数据为0，此时不需要画圆弧
* 6、不同的数据展示不同的颜色
*
* */
</script>
</html>