iOS支付宝环形统计图

打开支付宝------->我的积分 如下图

IMG_2056.PNG

原理：
1.逻辑原理：
由上图可知环形统计图的组成部分（消费购物、生活缴费、金融理财、其他），各个模块积分和总积分的比例画出环形。
2.技术原理：
很明显环形是由一个圆圈（CGContextAddArc）、颜色（CGContextSetRGBStrokeColor）、还有环形宽度（CGContextSetLineWidth）组成、
实现：
1.构建item（颜色、比例）

@interface CircleItem : NSObject
@property (nonatomic,strong) UIColor *color;
@property (nonatomic,assign) float lineWidth;//线宽
@property (nonatomic,assign) double percentage;//百分比

@property (nonatomic,copy) NSString *name;
@property (nonatomic,copy) NSString *currentSum;//消费金额
@property (nonatomic,copy) NSString *totalSum;//消费总额
@end

#import "CircleItem.h"

@implementation CircleItem

- (instancetype)init {

    if (self = [super init]) {
        _lineWidth = 20.0;
    }
    return self;
}

- (double)percentage {
    return self.currentSum.doubleValue/self.totalSum.doubleValue;

}
@end

2.画图（由上图可知一个环形图是根据若干个item构造的）

@interface CircleView : UIView


/**
 环形模型数组（CircleItem）
 */
@property (nonatomic,strong) NSArray *circleItemArray;
@end

#import "CircleView.h"
#import "CircleItem.h"
#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)
@interface CircleView ()
{
    double _startAngle;
    double _endAngle;

}
@end

@implementation CircleView

- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {
        _startAngle = 0;
        _endAngle = 0;
        self.backgroundColor = [UIColor whiteColor];
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {

    [super drawRect:rect];

    if (_circleItemArray == nil) {
        return;
    }

    for (int i=0; i<_circleItemArray.count; i++) {
        CircleItem *item = _circleItemArray[i];
        [self drawCircleLineRect:CGRectMake(0, 0, 200, 200) circleItem:item];

        [self drawCircleRect:CGRectMake(200, 50+25*i, 20, 20) circleItem:item];
        [self drawText:item.name rect:CGRectMake(220, 50+25*i, 60, 20)];

        NSString *fraction = item.currentSum;
        [self drawText:fraction rect:CGRectMake(280, 50+25*i, 50, 20)];
    }
}

//画环形图
- (void)drawCircleLineRect:(CGRect)rect circleItem:(CircleItem *)circleItem  {

    _endAngle = _startAngle + circleItem.percentage*360.0;

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //绘制路径: 圆形(中心坐标200、200、半径100、起点弧度0、终点弧度2PI、画的方向0逆1正) 第五个参数 是startAngle开始的角度
    CGContextAddArc(ctx,  rect.size.width/2, rect.size.height/2, 50, DEGREES_TO_RADIANS(_startAngle), DEGREES_TO_RADIANS(_endAngle), 0);

    const CGFloat *components = CGColorGetComponents(circleItem.color.CGColor);
    CGContextSetRGBStrokeColor(ctx, components[0], components[1], components[2], 1.0);
    CGContextSetLineWidth(ctx, circleItem.lineWidth);//线条宽度
    CGContextStrokePath(ctx);

    _startAngle =_endAngle;

}

//把文字渲染到屏幕上
- (void)drawText:(NSString *)text rect:(CGRect)rect {

     NSDictionary *attributeDict = @{NSFontAttributeName:[UIFont systemFontOfSize:13],NSForegroundColorAttributeName:[UIColor blackColor]};
    [text drawInRect:rect withAttributes:attributeDict];
}

//画圆
- (void)drawCircleRect:(CGRect)rect circleItem:(CircleItem *)circleItem {

    CGContextRef ctx = UIGraphicsGetCurrentContext();//1.0获取上下文
    CGContextAddArc(ctx,  rect.size.width/2+rect.origin.x, rect.size.height/2+rect.origin.y, 2.5, DEGREES_TO_RADIANS(0), DEGREES_TO_RADIANS(360), 0);
    const CGFloat *components = CGColorGetComponents(circleItem.color.CGColor);
    CGContextSetRGBStrokeColor(ctx, components[0], components[1], components[2], 1.0);
    CGContextSetLineWidth(ctx, 5);//线条宽度
    CGContextStrokePath(ctx);
}

@end

3.把数据赋值给环形统计图

 CircleItem *item1 = [[CircleItem alloc] init];
    item1.color = [UIColor colorWithRed:208/255.0 green:106/255.0 blue:83/255.0 alpha:1.0];
    item1.currentSum = @"20";
    item1.name = @"消费购物";
    item1.totalSum = @"1426";

    CircleItem *item2 = [[CircleItem alloc] init];
    item2.color = [UIColor colorWithRed:99/255.0 green:162/255.0 blue:219/255.0 alpha:1.0];
    item2.currentSum = @"30";
    item2.name = @"生活缴费";
    item2.totalSum = @"1426";

    CircleItem *item3 = [[CircleItem alloc] init];
    item3.color = [UIColor colorWithRed:220/255.0 green:160/255.0 blue:75/255.0 alpha:1.0];
    item3.name = @"金融理财";
    item3.currentSum = @"1266";
    item3.totalSum = @"1426";

    CircleItem *item4 = [[CircleItem alloc] init];
    item4.color = [UIColor colorWithRed:107/255.0 green:167/255.0 blue:147/255.0 alpha:1.0];
    item4.name = @"其他";
    item4.currentSum = @"110";
    item4.totalSum = @"1426";

    CircleView * circleView = [[CircleView alloc] initWithFrame:CGRectMake(10, 100, [UIScreen mainScreen].bounds.size.width-20, 200)];
    circleView.layer.borderWidth=1;
    circleView.layer.borderColor=[UIColor groupTableViewBackgroundColor].CGColor;
    circleView.layer.cornerRadius=8;
    circleView.clipsToBounds=YES;
    circleView.layer.masksToBounds=YES;

    [self.view addSubview:circleView];
    circleView.circleItemArray = @[item1,item2,item3,item4];
    [circleView setNeedsLayout];