先看效果：
起初是用cavans绘制的 结果会模糊，倍数绘制再缩小也是模糊，最后换成了svg绘制：
cavans：
global.progressChart = {
template: `
<div class="process-chart-box">
<canvas id="progressChart">当前浏览器不支持canvas</canvas>
<img src="xxx/progress_icon.png" class="progress-icon" v-if="per>0" />
</div>
`,
data() {
return {
isDark: false
}
},
props: ['per'],
methods: {
handleCanvas() {
const isDark = this.isDark
const percent = Math.round(this.per) / 100
let rem =
(document.body.offsetWidth / 750) * 100 < 60
? (document.body.offsetWidth / 750) * 100
: 60
let labelW = Math.round(0.32 * rem)
const box = document.querySelector('.process-chart-box')
if (!box) return
const w = box.offsetWidth
const ctx = document.getElementById('progressChart').getContext('2d')
ctx.canvas.width = w + 1
ctx.canvas.height = w + 1
//外圆环
ctx.beginPath()
ctx.arc(w / 2, w / 2, w / 2, 0, 2 * Math.PI)
//strokeStyle边框 fillStyle填充
ctx.strokeStyle = isDark ? '#262626' : '#fff'
ctx.fillStyle = isDark ? '#283851' : '#d6e6ff'
ctx.fill()
ctx.stroke()
//内圆环
ctx.beginPath()
ctx.arc(w / 2, w / 2, w / 2 - labelW, 0, 2 * Math.PI)
ctx.strokeStyle = isDark ? '#262626' : '#fff'
ctx.fillStyle = isDark ? '#262626' : '#fff'
ctx.fill()
ctx.stroke()
//环形图的进度条
if (percent > 0) {
ctx.beginPath()
ctx.arc(
w / 2,
w / 2,
(w - labelW) / 2,
-Math.PI / 2,
-Math.PI / 2 + percent * (Math.PI * 2),
false
)
ctx.lineWidth = labelW
ctx.lineCap = 'round'
ctx.strokeStyle = isDark ? '#2f71de' : '#3480ff'
ctx.stroke()
}
}
},
mounted() {
this.$nextTick(() => {
this.getDisplayMode()
.then(res => {
this.isDark = !!res
this.handleCanvas()
})
.catch(() => {
this.handleCanvas()
})
window.addEventListener(
'resize',
() => {
this.handleCanvas()
},
false
)
})
},
watch: {
per() {
this.handleCanvas()
}
}
}
svg:
global.progressChart = {
template: `
<div class="process-chart-box">
<svg :width="w" :height="w" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="progress-bg" :cx="w/2" :cy="w/2" :r="r" :stroke="isDark ? '#283851' : '#d6e6ff'" :stroke-width="progressW" fill="none"/>
<circle :style="+per>0?'':'display:none'" class="progress" :transform="rotate" :cx="w/2" :cy="w/2" :r="r" :stroke="isDark ? '#2f71de' : '#3480ff'" :stroke-width="progressW" fill="none" stroke-linecap="round" />
</svg>
<img src="xxx/progress_icon.png" class="progress-icon" v-if="per>0" />
</div>
`,
data() {
return {
isDark: false
}
},
props: ['per'],
computed: {
remToPx() {
let rem =
(document.body.offsetWidth / 750) * 100 < 60 ?
(document.body.offsetWidth / 750) * 100 :
60
console.log('remToPx', rem);
return rem
},
// 容器宽度
w() {
return 2.2 * this.remToPx
},
// 进度宽度
progressW() {
return 0.28 * this.remToPx
},
// 绘制半径
r() {
return (this.w - this.progressW) / 2
},
// 进度旋转
rotate() {
return `rotate(-90,${this.w/2},${this.w/2})`
}
},
methods: {
handleSvg() {
//换成svg绘制
var progressDom = document.querySelector(".progress");
if (!progressDom) {
return
}
let persent = this.per
if (persent > 0) {
var circleLength = Math.floor(2 * Math.PI * parseFloat(progressDom.getAttribute("r")));
var value = persent * circleLength / 100;
progressDom.setAttribute("stroke-dasharray", value + ",10000");
}
},
},
mounted() {
this.$nextTick(() => {
this.getDisplayMode()
.then(res => {
this.isDark = !!res
this.handleSvg()
})
.catch(() => {
this.handleSvg()
})
})
},
watch: {
per() {
this.handleSvg()
}
}
}