pexels-trung-nguyen-2747045.jpg

需求来源

项目中需要分析一次护理过程中,温度占比，经过和产品经理一番讨论之后，决定将表现方式由曲线图改为环形占比图。相比较曲线图，环形占比图能够更加清晰的展示想要表达的东西（当然也有实现成本低的原因），废话不多说，来看一下如何实现一个环形占比图。

设计图

截屏2022-02-22 下午5.11.14.png

实现思路

如上图，要实现这样一个封闭的环形占比图，需要分几步来完成，首先，确定圆环的起始位置，确定首先需要绘制哪一个圆环，然后根据每一个圆环的占比，将占比转化为角度，然后使用绘制圆的方法，绘制出对应的圆环即可。具体代码如下:

实现代码

绘制第一部分的圆环，占比为1，总占比为7

CAShapeLayer *layer = [CAShapeLayer new];
layer.lineWidth = 20;
//圆环的颜色
layer.strokeColor = HEXCOLOR(0xC0FBFF).CGColor;
//背景填充色
layer.fillColor = [UIColor clearColor].CGColor;
//设置半径为100
CGFloat radius = 81/2 - 20/2;
//按照顺时针方向
BOOL clockWise = true;
//初始化一个路径
//完整的圆
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake((70), (82)/2) radius:radius startAngle:(-0.5f * M_PI) endAngle:(-0.5f * M_PI) + 0.14 * M_PI * 2 clockwise:clockWise];
layer.path = [path CGPath];
[self.layer addSublayer:layer];

绘制第二部分的圆环，和第一个圆环的圆心保持一致，起点为第一个圆环的终点，占比为1.6，总占比为7

CAShapeLayer *layer1 = [CAShapeLayer new];
layer1.lineWidth = 20;
//圆环的颜色
layer1.strokeColor = HEXCOLOR(0xFFE86A).CGColor;
//背景填充色
layer1.fillColor = [UIColor clearColor].CGColor;
//初始化一个路径
UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake((70), (82)/2) radius:radius startAngle:(-0.5f * M_PI) + 0.14 * M_PI * 2 endAngle:((-0.5f * M_PI) + 0.37 * M_PI * 2) clockwise:clockWise];
layer1.path = [path1 CGPath];
[self.layer addSublayer:layer1];

绘制第三部分的圆环，和第一个圆环和第二个圆环的圆心保持一致，起点为第二个圆环的终点，占比为4，总占比为7

CAShapeLayer *layer2 = [CAShapeLayer new];
layer2.lineWidth = (20);
//圆环的颜色
layer2.strokeColor = HEXCOLOR(0xFFB94B).CGColor;
//背景填充色
layer2.fillColor = [UIColor clearColor].CGColor;
//初始化一个路径
UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake((70), (82)/2) radius:radius startAngle:((-0.5f * M_PI) + 0.37 * M_PI * 2) endAngle:M_PI*1.5 clockwise:clockWise];
layer2.path = [path2 CGPath];
[self.layer addSublayer:layer2];

结尾

至此，环形占比图实现已经完成了。总体来说，实现还是比较简单的，如果有哪块不懂的地方。可以评论区留言，我会及时回复。