如果用echarts或者其他图表来写个进度条有点大材小用,所以直接简单html、js写一下就可以;
以下代码基于vue2,
部分代码来自国内直连GPT/Claude镜像站
javascript
<template>
<div class="progress-container">
<div class="progress-item" v-for="(item, index) in progressData" :key="index">
<div class="label">{{ item.label }}</div>
<div class="progress-bar">
<div class="progress" :style="{ width: item.value + '%', backgroundColor: item.color }">
<span class="value">{{ item.value }}%</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ProgressChart',
data() {
return {
progressData: [
{ label: '当前值', value: 15, color: '#ff4757' },
{ label: '设计值', value: 8, color: '#2ed573' }
]
}
},
}
</script>
<style scoped>
.progress-container {
background-color: #1e3a5f;
padding: 10px;
}
.progress-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.label {
width: 60px;
color: #fff;
font-size: 14px;
}
.progress-bar {
flex-grow: 1;
height: 20px;
background-color: #2c4d6f;
margin: 0 10px;
position: relative;
}
.progress {
height: 100%;
transition: width 0.5s ease-in-out;
position: relative;
}
.value {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 14px;
}
</style>