css封装小圆环

<template>

<div class="xxc-ring" ref="ring" :style="`width: ${size ? size + 'px' : '100%'}; height: ${size ? size + 'px' : '100%'}; border: 0;`">

<!-- <div class="xxc-ring-circle-start" v-if="value"></div> -->

<div class="xxc-ring-text">

<!-- <span v-for='(it,i) in tongbi' :key='i'>

<span class='img-up' v-if="val>=0 && it==true"><img :src="path" /></span>

</span> -->

<span :style="{color:color?color:'#676767'}" class="val">{{val || 0 | formatVal(fix)}}</span>

<span v-if="text" class="text">{{text}}</span>

<!-- <span v-for='(it,index) in tongbi' :key='index'>

<span class='img-down' v-if="val<0 &&it==true "><img :src="pathDown" /></span>

</span> -->

</div>

<!-- <div class="xxc-ring-circle-end" v-if="value" ref="circle"></div> -->

</div>

</template>

<script>

const [_step, _deg, _deg90, _deg270] = [90, 3.6, 90, 270];

export default {

name: "xxc-ring",

props: ["value", "time", "size", 'text', 'fix', 'color', 'tongbi'],

data() {

return {

val: 0,

current: 0,

heightlightColor: "orangered",

step: 90,

deg: 3.6,

deg90: 90,

deg270: 270,

// path: require('@/common/image/insurance/rise16_16.png'),

// pathDown: require('@/common/image/insurance/drop16_16.png'),

// tongbi: []

};

},

filters: {

formatVal(val, fix) {

if (!fix) {

fix = 1;

}

if (typeof (val) == undefined) {

val = 0;

}

if (val == '0.0') {

val = 0

}

if (isNaN(val) || !isFinite(val)) {

val = 0;

}

return Number(val).toFixed(fix);

}

},

watch: {

value(val) {

this.setOptions(val);

this.init();

}

},

methods: {

setOptions(val) {

this.current = 0;

this.val = isNaN(val) ? 0 : val;

if (val <= 0) {

this.heightlightColor = "rgb(133, 204, 71)";

this.step = -_step;

this.deg = -_deg;

this.deg90 = -_deg90;

this.deg270 = -_deg270;

} else if (val > 0) {

this.heightlightColor = "#FF6200";

this.step = _step;

this.deg = _deg;

this.deg90 = _deg90;

this.deg270 = _deg270;

}

},

init() {

setTimeout(() => {

this.animation();

let loop = setInterval(() => {

if (this.current >= Math.abs(this.val) || this.current >= 100)

clearInterval(loop);

else {

this.current++;

this.step = this.step + this.deg;

this.animation();

// this.$refs.circle.style.transform = `rotate(${this.current *

// 3.6}deg) translate(0, -1600%)`;

}

}, this.time ? this.time / Math.abs(this.val) : 300 / Math.abs(this.val));

}, 20);

},

animation() {

if (this.$refs.ring) this.$refs.ring.style.backgroundImage = `linear-gradient(${

this.current < 50

? this.deg90

: (this.current - 50) * this.deg - this.deg90

}deg, ${

this.current < 50 ? "#ccc" : this.heightlightColor

} 50%, transparent 50%, transparent), linear-gradient(${

this.current < 50 ? this.step : this.deg270

}deg, ${this.heightlightColor} 50%, #ccc 50%, #ccc)`;

}

},

created() {

this.setOptions(this.value);

},

mounted() {

this.init();

}

};

</script>

<style lang="less">

.xxc-ring {

position: relative; // width: 180px;

// height: 180px;

border-radius: 50%;

transform: rotate(180deg);

background-image: linear-gradient( 90deg,

#ccc 50%,

transparent 50%,

transparent),

linear-gradient(90deg, #FF6200 50%, #ccc 50%, #ccc);

.xxc-ring-text {

width: 94%;

height: 94%;

color: #999;

position: absolute;

left: 50%;

top: 50%;

background-color: #fff; // border-radius: 50%;

border-radius: .5rem;

transform: translate(-50%, -50%) rotate(180deg);

text-align: center; // font-size: 15px;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

span.val {

font-size: .26rem; // color: #f05a25; // color: #676767;

&:after {

content: '%';

font-size: .16rem;

}

}

span.text {

// color: #676767;

margin-top: .06rem;

font-size: .18rem;

}

}

.xxc-ring-circle-start,

.xxc-ring-circle-end {

width: 3%;

height: 3%;

background-color: orangered;

border-radius: 50%;

position: absolute;

top: 50%;

left: 50%;

z-index: 100;

margin-top: -1.5%;

margin-left: -1.5%;

transform: translate(0, -1630%);

}

.img-up,

.img-down {

img {

width: .32rem; // display: block;

}

}

.img-down {

img {

transform: translateY(.1rem);

}

}

.img-up {

img {

transform: translateY(-.02rem);

}

}

}

</style>