小程序圆形进度条及面积图实现的方法

<circle 
    :maxVal="maxVal" 
    :currentVal="currentVal" 
    :status="2"
/>

setCircle() {
    const { currentVal, maxVal } = this;
    // NO1
    if (currentVal > maxVal / 2) {
        this.leftRotate = this.formatDegree(maxVal / 2);
        this.rightRotate = this.formatDegree(currentVal - maxVal / 2);
    } else {
        // NO2
        this.leftRotate = this.formatDegree(currentVal);
    }
    this.pointRotate = this.formatDegree(currentVal);
},
// NO3 计算旋转
formatDegree(percent) {
    return -136 + (360 / this.maxVal * percent);
}

<combat 
    :maxVal="maxVal"
    :currentVal="currentVal" 
    :sourceData="sourceData"
/>

// 设置图表信息
async setUppixelRatio() {
    const pixelRatio = await this.getSystemInfo();
    const { canvas: res, ctx } = this;
    let canvas = res.node;
    // 放大canvas 解决模糊问题
    canvas.width = res.width * pixelRatio;
    canvas.height = res.height * pixelRatio;
    this.originX = canvas.width / 2;
    this.originY = canvas.height / 2;
    this.startAngle = Math.PI + Math.PI / this.sourceData.length;
    // 最大值分为若干等分
    this.combatMaxVal = this.maxVal / this.sourceData.length;
    this.fitAngle();
    // 缩小canvas
    ctx.scale(pixelRatio, pixelRatio);
},