export default {

props: {

progress:{

type:Number,

default:0

}

},

data() {

return {

}

},

watch: {

progress(val){

if(val<=100){

this.updateDonut(val)

}

}

},

beforeDestroy() {

// 清除旧组件的样式标签

},

methods: {

updateDonut (percent) {

// 圆形进度

let offset = 0

let $el = this.$refs.section3

let $elItem = this.$refs.section3Item

let $txt = this.$refs.percent

if (percent < 50) {

offset = (360 / 100) * percent

$el.style.webkitTransform = $el.style.msTransform = $el.style.MozTransform = 'rotate(' + offset + 'deg)'

$elItem.style.webkitTransform = $elItem.style.msTransform = $elItem.style.MozTransform = 'rotate(' + (180 - offset) + 'deg)'

$elItem.style.backgroundColor = '#e3e3e3'

} else {

offset = ((360 / 100) * percent) - 180

$el.style.webkitTransform = $elItem.style.msTransform = $el.style.MozTransform = 'rotate(180deg)'

$elItem.style.webkitTransform = $elItem.style.msTransform = $elItem.style.MozTransform = 'rotate(' + offset + 'deg)'

$elItem.style.backgroundColor = '#FF9300'

}

$txt.innerHTML = percent

}

},

mounted() {

this.updateDonut(0)

},

}

.circle-chart {

.donut-chart {

position: relative;

width: 70px;

height: 70px;

border-radius: 100%

}

.donut-chart .center {

background: #fff;

border-radius: 50%;

width: 70%;

height: 70%;

left: 15%;

top: 15%;

position: absolute;

a {

color: #000;

display: block;

font-size: 13px;

font-weight: 700;

left: 50%;

position: absolute;

top: 50%;

transform: translate(-50%,-50%);

small {

font-size: 14px;

}

}

}

.clip {

border-radius: 50%;

clip: rect(0px 70px 70px 35px);

height: 100%;

position: absolute;

width: 100%;

}

.item {

border-radius: 50%;

clip: rect(0px 35px 70px 0px);

height: 100%;

position: absolute;

width: 100%;

}

#section1 {

transform: rotate(0deg);

}

#section1 .item {

background-color: #FF9300;

transform: rotate(180deg);

}

#section2 {

transform: rotate(180deg);

}

#section2 .item {

background-color: #e3e3e3;

transform: rotate(180deg);

}

}