unique-interface
Version:
无UI组件库
69 lines (67 loc) • 2.17 kB
JavaScript
module.exports = ({
template: require('remain_amount.html'),
assets: [require('remain_amount.less')],
props: {
// 数据
threshold: {
type: Object,
required: true
},
/**
@r 半径
@strokeWidth 线宽
@angle svg图的角度
*/
params: {
type: Object,
required: true
}
},
data: function() {
return {
svgResult: null
};
},
mounted: function() {
this.calculateSvgResult();
},
methods: {
calculateSvgResult: function() {
var threshold = this.threshold,
params = this.params;
var percent = threshold.available / threshold.threshold;
percent = percent > 0 ? percent : 0 ;
var availableLine = Math.PI * params.r * 2 * params.angle / 360 * percent;
this.svgResult = {
svg: this.svg(params),
availableLine: availableLine,
available: threshold.available,
desc: threshold.desc
};
},
// 根据半径、线宽、角度画圆
svg: function(params) {
var r = params.r,
strokeWidth = params.strokeWidth,
angle = params.angle;
var width = r * 2 + strokeWidth;
var height = r * 2 + strokeWidth;
var center = {
x: width / 2,
y: height /2
};
var startX = center.x - r * Math.sin((360 - angle) / 2 * 2 * Math.PI / 360);
var startY = center.y + r * Math.cos((360 - angle) / 2 * 2 * Math.PI / 360);
var endX = 2 * center.x - startX;
var endY = startY;
var largeArcFlag = angle > 180 ? 1 : 0;
return {
// svg标签的宽高属性
width: width,
height: height,
// path标签的d属性
d: 'M' + startX + ',' + startY + ' A' + r + ',' + r + ',0,' + largeArcFlag + ',1,' + endX + ',' + endY
};
}
}
});