本文首發(fā)于公眾號【一個老碼農(nóng)】

有這樣一個需求，有七個顏色赤、橙、黃、綠、青、藍、紫分別占比為10%、25%、10%、10%、20%、15%、10%。畫出餅狀統(tǒng)計圖來表示它們分別的占比，并顯示出各自的顏色名稱。
思路如下：

1. 此時我們便可以用UIBezierPath繪制出圓形
2. CAShapeLayer根據(jù)它們各自的百分比以及path路徑繪制出扇形。
3. 然后根據(jù)扇形角度計算出各自扇形的中心點
4. 循環(huán)創(chuàng)建label并顯示顏色名，設(shè)置各個扇形中心點為label的中心點

廢話不多說，上代碼：

//封裝的餅圖類
//6個顏色
fileprivate let defaultColors = [UIColor.red, UIColor.orange, UIColor.yellow, UIColor.green, UIColor.cyan, UIColor.blue, UIColor.purple]
class PieView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    //options：選項字符串
    //percents：百分比（轉(zhuǎn)化為0 - 1的小數(shù)）
    func setData(options: [String], percents: [CGFloat]) {
        if options.count == 0 ||
            options.count != percents.count ||
            options.count > defaultColors.count {
            return
        }
        
        //設(shè)置餅狀圖中心點
        let centerX: CGFloat = frame.width/2
        let centerY: CGFloat = frame.height/2
        let centerPoint = CGPoint(x: centerX, y: centerY)
        //設(shè)置半徑
        let radius = min(centerX, centerY)/2
        //獲取展示數(shù)據(jù)總和
        var nums: CGFloat = 0
        for i in percents {
            nums += I
        }
        
        //繪制各個扇形的路徑，從12點鐘方向順時針開始繪制
        let subPath = UIBezierPath(arcCenter: centerPoint, radius: radius, startAngle: CGFloat(-Double.pi/2), endAngle: CGFloat(Double.pi/2*3), clockwise: true)
        //設(shè)置各個扇形開始和結(jié)束位置
        var start: CGFloat = 0
        var end: CGFloat = 0
        for i in 0 ..< percents.count {
            end = percents[i]/nums + start
           
            if percents[i] != 0 {
                let strokeColor = defaultColors[i].cgColor
                
                let subLayer = drawLayerWith(fillColor: UIColor.clear.cgColor, strokeColor: strokeColor, strokeStart: start, strokeEnd: end, zPosition: 2, lineWidth: radius*2/3, path: subPath.cgPath)
                layer.addSublayer(subLayer)
                //扇形角度
                let angel = CGFloat(Double.pi) * (start + end) 
                let labelCenterX = radius*sin(angel) + centerX
                let labelCenterY = -radius*cos(angel) + centerY
                //顏色名label
                let label = createLabel(title: "\(options[i])", radius: radius)
                label.center = CGPoint(x: labelCenterX, y: labelCenterY)
                addSubview(label)
            }
            
            start = end
        }
    }
    
    private func createLabel(title: String, radius: CGFloat) -> UILabel {
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: radius * 0.8, height: radius * 0.3))
        label.text = title
        label.textColor = .black
        label.textAlignment = .center
        label.font = UIFont.systemFont(ofSize: 15)
        label.layer.zPosition = 3
        label.sizeToFit()
        return label
    }
    
    /// 返回一個CAShapeLayer
    /// - Parameters
    ///   - fillColor   填充顏色
    ///   - strokeColor 填充路徑的描邊輪廓的顏色
    ///   - strokeStart 表示路徑的起點,在[0,1]的范圍內(nèi)
    ///   - strokeEnd  表示路徑的終點,在[0,1]的范圍內(nèi)
    ///   - zPosition   表示在superlayer中的位置
    ///   - lineWidth   填充路徑的線寬
    ///   - path        表示要呈現(xiàn)形狀的路徑
    fileprivate func drawLayerWith(fillColor: CGColor,
                                   strokeColor: CGColor,
                                   strokeStart: CGFloat,
                                   strokeEnd: CGFloat,
                                   zPosition: CGFloat,
                                   lineWidth: CGFloat,
                                   path: CGPath) -> CAShapeLayer {
        let layer = CAShapeLayer()
        layer.fillColor = fillColor
        layer.strokeColor = strokeColor
        layer.strokeStart = strokeStart
        layer.strokeEnd = strokeEnd
        layer.zPosition = zPosition
        layer.lineWidth = lineWidth
        layer.path  = path
        return layer
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

//在外部調(diào)用代碼
let pie = PieView()
view.addSubview(pie)
pie.frame = CGRect(x: (view.frame.width - 250)/2, y: 100, width: 250, height: 250)
let options = ["赤","橙","黃","綠","青","藍","紫"]
let percents: [CGFloat] = [0.1, 0.25, 0.1, 0.1, 0.2, 0.15, 0.1]
pie.setData(options: options, percents: percents)

效果圖：

image

原文地址