本來想用css3來實現(xiàn)，發(fā)現(xiàn)輪廓邊上殘影嚴重，所以直接用小程序的canvas使用來。
最終效果如下：

我的整頁代碼如下，里面已經(jīng)寫出備注來。

<template><div class="statistic"><canvas canvas-id="runCanvas" id="runCanvas" class='canvas'></canvas></div> </template> <script>export default {data() {return {}},methods: {run(x0, y0, nowPercent) {// 1° 設置配置參數(shù)// 環(huán)形的線寬度const lineWidth = 16;// 半徑const radius = x0 - lineWidth;// 起始弧const sAngle = -0.5 * Math.PI;// 終止弧let eAngle = (2 * Math.PI / 100 * nowPercent) - 0.5 * Math.PI;// 2° 畫圓環(huán)陰影this.ctx2.setLineWidth(16);this.ctx2.setStrokeStyle('#d2d2d2');this.ctx2.setLineCap('round')this.ctx2.arc(x0, y0, radius, 0, 2 * Math.PI, false);//對當前路徑進行描this.ctx2.stroke();// 3° 畫圓環(huán)激活高亮部分this.ctx2.beginPath();//開始一個新的路徑this.ctx2.setLineWidth(16);this.ctx2.setStrokeStyle('#00D49F');this.ctx2.setLineCap('round')this.ctx2.arc(x0, y0, radius, sAngle, eAngle, false);this.ctx2.stroke();// 4° 設置環(huán)心字體this.ctx2.beginPath();// 字體大小 注意不要加引號this.ctx2.font = 'normal bold 40px sans-serif';// 字體顏色this.ctx2.setFillStyle("#00D49F");// 字體位置this.ctx2.setTextAlign("center");// 字體對齊方式this.ctx2.setTextBaseline("middle");// 文字內(nèi)容和文字坐標this.ctx2.fillText(nowPercent + "%", x0, y0);// 5°最后通過draw把上面的描述繪制出來this.ctx2.draw();},draw(id, percent) {this.ctx2 = wx.createCanvasContext(id);const that = this;wx.createSelectorQuery().select('#' + id).boundingClientRect(function (rect) { //監(jiān)聽canvas的寬高// 獲取圓心坐標var x0 = parseInt(rect.width / 2); //獲取canvas寬的的一半var y0 = parseInt(rect.height / 2); //獲取canvas高的一半，// 開始畫畫that.run(x0, y0, percent);}).exec();},},mounted() {this.draw('runCanvas', 50);} } </script><style lang="less" scoped>.canvas {width: 150px;height: 150px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto auto;z-index: 99;} </style> <style lang="less">page {background: white;} </style>

總結(jié)

以上是生活随笔為你收集整理的小程序 mpvue 使用canvas绘制环形图表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。