本文使用iview,其他vue的UI库一样,稍作修改即可使用。
在线访问: https://run.iviewui.com/EHOwwV89
<template>
<Progress :percent="100" :stroke-color="['#19be6b', '#ff3400']" :stroke-width="15" text-inside/>
<Progress :percent="10" :stroke-color="getColor(10)" :stroke-width="15" text-inside/>
<Progress :percent="20" :stroke-color="getColor(20)" :stroke-width="15" text-inside/>
<Progress :percent="30" :stroke-color="getColor(30)" :stroke-width="15" text-inside/>
<Progress :percent="40" :stroke-color="getColor(40)" :stroke-width="15" text-inside/>
<Progress :percent="50" :stroke-color="getColor(50)" :stroke-width="15" text-inside/>
<Progress :percent="60" :stroke-color="getColor(60)" :stroke-width="15" text-inside/>
<Progress :percent="70" :stroke-color="getColor(70)" :stroke-width="15" text-inside/>
<Progress :percent="80" :stroke-color="getColor(80)" :stroke-width="15" text-inside/>
<Progress :percent="90" :stroke-color="getColor(90)" :stroke-width="15" text-inside/>
<Progress :percent="100" :stroke-color="getColor(100)" :stroke-width="15" text-inside/>
</template>
<script>
export default {
data() {
return {
percent: 100,
}
},
methods: {
getColor(percent) {
let colors = this.gradientColors('#19be6b', '#ff3400', 100, 1)
return ['#19be6b', colors[percent - 1]]
},
// convert #hex notation to rgb array
hexToRgb(hexColor) {
return hexColor.length === 4 ? hexColor.substr(1).split('')
.map(s => 0x11 * parseInt(s, 16)) :
[hexColor.substr(1, 2), hexColor.substr(3, 2), hexColor.substr(5, 2)]
.map(s => parseInt(s, 16))
},
// zero-pad 1 digit to 2
pad(s) {
return s.length === 1 ? '0' + s : s
},
// gradient colors
gradientColors(start, end, steps, gamma) {
let i, j, ms, me, output = [], so = []
gamma = gamma || 1
let normalize = function (channel) {
return Math.pow(channel / 255, gamma)
}
start = this.hexToRgb(start).map(normalize)
end = this.hexToRgb(end).map(normalize)
for (i = 0; i < steps; i++) {
ms = i / (steps - 1)
me = 1 - ms
for (j = 0; j < 3; j++) {
so[j] = this.pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16))
}
output.push('#' + so.join(''))
}
return output
}
}
}
</script>
<style lang="scss" scoped>
.ivu-progress-inner-text {
display: inherit;
font-size: 10px;
}
</style>