vue实现半圆形进度图,可以显示两种数据
时间: 2024-05-08 13:21:48 浏览: 11
可以通过使用SVG实现半圆形进度图,其中可以显示两种数据。
以下是一个示例代码:
```html
<template>
<div class="progress">
<svg viewBox="0 0 100 50">
<!-- 底部圆弧 -->
<path class="bg" d="M50 5 A45 45 0 0 1 95 27.5" />
<!-- 进度圆弧 -->
<path class="progress" :stroke-dasharray="dasharray" :stroke-dashoffset="dashoffset" d="M50 5 A45 45 0 0 1 95 27.5" />
<!-- 进度数值显示 -->
<text x="50" y="35" class="value">{{ value1 }}</text>
<text x="50" y="45" class="value">{{ value2 }}</text>
</svg>
</div>
</template>
<script>
export default {
props: {
value1: {
type: Number,
default: 0
},
value2: {
type: Number,
default: 0
},
total: {
type: Number,
default: 100
}
},
computed: {
// 计算进度条的参数
dasharray() {
const circumference = Math.PI * 45 * 2;
return `${circumference} ${circumference}`;
},
dashoffset() {
const circumference = Math.PI * 45 * 2;
return circumference - (this.value1 / this.total) * circumference;
}
}
};
</script>
<style scoped>
.progress {
width: 100px;
height: 50px;
}
.bg {
fill: none;
stroke: #eee;
stroke-width: 10;
}
.progress {
fill: none;
stroke: #007bff;
stroke-width: 10;
stroke-linecap: round;
transition: stroke-dashoffset 0.5s ease-in-out;
}
.value {
font-size: 10px;
text-anchor: middle;
fill: #777;
}
</style>
```
在上面的代码中,我们使用SVG的<path>元素来绘制底部圆弧和进度圆弧,使用<text>元素来显示进度数值。
通过计算得到进度条的参数,通过CSS实现动画效果。
在父组件中,我们可以传递两个数值作为props,分别表示两种数据的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)