<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>