圆环比例图

<template>
    <canvas class="pie" id="pieRatio"></canvas>
</template>

<script>
    export default {
        data() {
            return {
                baseRem: 1.9,
                endPortrait: 0.77, //终止比例
            }
        },
        props:['property'],
        mounted(){
            let canvas = document.getElementById('pieRatio');
            let context = canvas.getContext('2d');
            let baseFont = document.querySelector('html').style['fontSize'].slice(0,-2);
            let baseSize = baseFont * this.baseRem;
            let getPixelRatio = function(context) {
                var backingStore = context.backingStorePixelRatio ||  context.webkitBackingStorePixelRatio || 1;
                return (window.devicePixelRatio || 1) / backingStore;
            };
            let ratio = getPixelRatio(context);

            canvas.width = baseSize * ratio;
            canvas.height = baseSize * ratio;
            let centerX = canvas.width/2,   //Canvas中心点x轴坐标
                centerY = canvas.height/2,  //Canvas中心点y轴坐标
                radius = baseSize * ratio/ 2,
                minradius = baseSize * ratio/ 2 -38,
                rad = Math.PI*2/radius;

            let startArc = Math.PI/2;
            let balanceAngle = (+this.property.balancePercent)* Math.PI * 2/100,
                fundAngle = (+this.property.fundPercent)*Math.PI * 2/100,
                gushouAngle = (+this.property.gushouPercent)*Math.PI * 2/100,
                insuranceAngle = (+this.property.insurancePercent)* Math.PI * 2/100;

            //画灰色图
            context.beginPath();
            context.moveTo(centerX,centerY);
            context.arc(centerX,centerY, radius, 0, Math.PI * 2, false);
            context.closePath();
            context.fillStyle = '#ddd';
            context.fill();

            //画比例,分别不同的产品
            context.beginPath();
            context.moveTo(centerX,centerY);
            context.arc(centerX,centerY, radius, -startArc, balanceAngle-startArc , false);
            context.closePath();
            context.fillStyle = '#ffd95a';
            context.fill();


            context.beginPath();
            context.moveTo(centerX,centerY);
            context.arc(centerX,centerY, radius, balanceAngle-startArc, balanceAngle+fundAngle-startArc, false);
            context.closePath();
            context.fillStyle = '#ff9e5a';
            context.fill();

            context.beginPath();
            context.moveTo(centerX,centerY);
            context.arc(centerX,centerY, radius, balanceAngle+fundAngle-startArc , balanceAngle+fundAngle+gushouAngle-startArc, false);
            context.closePath();
            context.fillStyle = '#f45870';
            context.fill();

            context.beginPath();
            context.moveTo(centerX,centerY);
            context.arc(centerX,centerY, radius, balanceAngle+fundAngle+gushouAngle-startArc, balanceAngle+fundAngle+gushouAngle+insuranceAngle-startArc, false);
            context.closePath();
            context.fillStyle = '#50d2C2';
            context.fill();

            //画内部白色
            context.beginPath();
            context.moveTo(centerX,centerY);
            context.arc(centerX,centerY, minradius, 0, Math.PI * 2, true);
            context.closePath();
            context.fillStyle = 'rgba(255,255,255,1)';
            context.fill();

            //写文案
            context.font = "bold .24rem";
            context.fillStyle = '#98989F';
            context.textAlign = 'center';
            context.textBaseline = 'bottom';
            context.moveTo(centerX,centerY);
            context.fillText('总资产', centerX,centerY);

            context.font = "bold .30rem";
            context.fillStyle = '#585c64';
            context.textAlign = 'center';
            context.textBaseline = 'bottom';
            context.moveTo(centerX,centerY);
            context.fillText(this.property.totalAmount, centerX,centerY+20);
        }
    }
</script>

<style lang="less" scoped>
    /*.pie{
        height: 5.08rem;
    }*/
</style>

转载于:https://www.cnblogs.com/xcgs/p/6344076.html