wanda-bm-guide/src/views/homepage/Circle.js

/**
 * 双环形图
 *
 * @author hanyaolong
 */
export class SCircle {

    /**
     * 构造函数
     *
     * @param {canvasid} id
     */
    constructor(id,radius =60) {
        const canvas = document.getElementById(id);
        this.ctx = canvas.getContext("2d");
        this.percent = 100;  //最终百分比
        this.circleX = canvas.width / 2;  //中心x坐标
        this.circleY = canvas.height / 2;  //中心y坐标
        this.radius = radius; //圆环半径
        this.lineWidth = 5;  //圆形线条的宽度
        this.fontSize = radius *3/4; //字体大小
        this.baseName = '本月总任务'
    }

    /**
     * 绘制圆
     *
     * @param {x} cx
     * @param {y} cy
     * @param {半径} r
     */
    circle(cx, cy, r) {
        this.ctx.beginPath();
        this.ctx.lineWidth = this.lineWidth;
        this.ctx.strokeStyle = '#2a4886';
        this.ctx.arc(cx, cy, r, 0, (Math.PI * 2), true);
        this.ctx.stroke();
    }

    /**
     * 设置中心文字
     *
     * @param {文本} text
     */
    setText(text) {
        this.ctx.beginPath();
        //中间的字
        this.ctx.font = this.fontSize + 'px April';
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'middle';
        this.ctx.fillStyle = '#ffffff';
        this.ctx.fillText(text, this.circleX, this.circleY);
        this.ctx.stroke();
        this.ctx.beginPath()
        this.ctx.font = this.fontSize / 3 + 'px April';
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'middle';
        this.ctx.fillStyle = '#ffffff';
        this.ctx.fillText(this.baseName, this.circleX, this.circleY + this.fontSize * 3 / 4);
        this.ctx.stroke();
    }

    /**
     * 绘制圆弧
     *
     * @param {x} cx
     * @param {y} cy
     * @param {半径} r
     */
    sector(cx, cy, r, endAngle, strokeStyle = "#c81d39") {
        this.ctx.beginPath();
        this.ctx.lineWidth = this.lineWidth;
        this.ctx.strokeStyle = strokeStyle ? strokeStyle : '#c81d39';
        //圆弧两端的样式
        this.ctx.lineCap = 'round';
        if(endAngle == 0){
           this.ctx.lineCap = 'butt'

        }
        this.ctx.arc(
            cx, cy, r,
            (Math.PI * -1 / 2),
            (Math.PI * -1 / 2) + endAngle / 100 * (Math.PI * 2),
            false
        );
        this.ctx.stroke();
    }

    /**
     * 初始化
     *
     * @param {x} x
     * @param {y} y
     * @param {半径} r
     */
    init(x, y, r) {
        //清除canvas内容
        this.ctx.clearRect(0, 0, x * 2, y * 2);
        this.circle(x, y, r);
        this.circle(x, y, r * 1.2);
    }

    /**
     * 设置百分比
     *
     * @param {内环百分比（100最大）} p1
     * @param {外环百分比（100最大）} p2
     */
    setPersent(p1, p2) {
        this.init(this.circleX, this.circleY, this.radius);
        //圆弧
        this.sector(this.circleX, this.circleY, this.radius, p1);
        this.sector(this.circleX, this.circleY, this.radius * 1.2, p2, '#FFA34A');
    }
    // 内外环百分比换算
    persentTransform(total, p1, p2) {
        const r1 = Math.floor(p1 / total * 100)
        const r2 = Math.floor(p2 / total * 100)
        this.setPersent(r1, r2)
    }
}