vue实现半圆形进度图
时间: 2023-09-06 17:07:08 浏览: 60
可以使用 Vue.js 和 SVG 来实现半圆形进度图。
首先,在 Vue 的组件中定义一个 SVG 元素,设置它的宽度和高度,以及 viewBox 属性,用于定义图形的坐标系。然后,创建一个圆弧元素,设置它的属性包括半径、圆心、起始角度和结束角度等。最后,根据进度值计算出圆弧的结束角度,并将其设置为圆弧元素的属性。
下面是一个简单的示例代码:
```
<template>
<div class="progress">
<svg :width="size" :height="size" viewBox="0 0 100 50">
<circle class="bg-circle" :cx="cx" :cy="cy" :r="r" />
<path class="fg-arc" :d="arcPath" :stroke-dasharray="circumference" />
</svg>
</div>
</template>
<script>
export default {
props: {
size: {
type: Number,
default: 100
},
strokeWidth: {
type: Number,
default: 10
},
progress: {
type: Number,
default: 0
}
},
computed: {
cx() {
return this.size / 2;
},
cy() {
return this.size / 2;
},
r() {
return (this.size - this.strokeWidth) / 2;
},
circumference() {
return 2 * Math.PI * this.r;
},
arcPath() {
const angle = this.progress / 100 * Math.PI;
const x = this.cx + this.r * Math.sin(angle);
const y = this.cy - this.r * Math.cos(angle);
const largeArc = angle > Math.PI ? 1 : 0;
return `M ${this.cx},${this.cy - this.r}
A ${this.r},${this.r} 0 ${largeArc},1 ${x},${y}`;
}
}
};
</script>
<style>
.progress {
display: inline-block;
vertical-align: middle;
}
.bg-circle {
fill: none;
stroke: #ddd;
stroke-width: 10;
}
.fg-arc {
fill: none;
stroke: #007aff;
stroke-width: 10;
stroke-linecap: round;
transition: stroke-dasharray 0.5s ease-out;
}
</style>
```
在模板中,使用 SVG 元素来绘制半圆形进度图。其中,`size` 属性表示 SVG 元素的宽度和高度,`cx` 和 `cy` 属性表示圆心的坐标,`r` 属性表示半径,`strokeWidth` 属性表示圆弧的线宽,`progress` 属性表示进度值(0 到 100)。
在计算属性中,使用 `circumference` 计算出圆弧的周长,然后根据进度值计算出圆弧的结束角度,并将其转换为圆弧路径字符串,存储在 `arcPath` 属性中。
最后,在样式中设置圆弧的样式,包括颜色、线宽和线帽等。在 `fg-arc` 类中使用 `transition` 属性实现圆弧动画效果。
使用该组件时,只需要传入进度值,即可实现半圆形进度图的绘制:
```
<template>
<div>
<progress-circle :size="100" :progress="value" />
<input type="range" v-model="value" />
</div>
</template>
<script>
import ProgressCircle from './ProgressCircle.vue';
export default {
components: {
ProgressCircle
},
data() {
return {
value: 50
};
}
};
</script>
```