<template>
<div class="Echarts">
<svg version="1.1" :width="Size" :height="Size" viewBox="0 0 100 100">
<circle
r="50"
cy="50"
cx="50"
fill="transparent"
class="progress-backround">
</circle>
<circle
r="50"
cy="50"
cx="50"
stroke-linecap="round"
fill="transparent"
:style="{stroke:Stroke}"
:stroke-dasharray="dashArray"
:stroke-dashoffset="dashOffset"
class="progress-bar">
</circle>
</svg>
<div class="number">
<h2>{{TextNumber}}</h2>
</div>
<div class="title">{{Title}}</div>
</div>
</template>
<script>
export default{
props:{
// svgde尺寸大小
Size:{
Type:Number,
default:100,
},
Title:'',
Stroke:{
Type:Object,
default:'#9191A5',
},
TextNumber:{
Type:Number,
default:0,
},
percent:{
Type:Number,
default:0
}
},
data(){
return{
dashArray:Math.PI*2*50
}
},
computed:{
dashOffset(){
return(1-this.percent)*this.dashArray
}
}
}
</script>
<style scoped>
.Echarts{
width: 100px;
overflow: auto;
position: relative;
float: left;
}
circle{
stroke-width: 10px;
transform-origin: center;
transform: scale(0.9);
}
.progress-backround{
stroke:#EAEAEB;
}
.progress-bar{
transform: rotate(-80deg) scale(0.9);
}
.number {
position: absolute;
top: 25px;
left: 5px;
font-size: 16px;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
}
.title{
width: 80px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #2F3050;
text-align: center;
}
</style>
6443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
