剛看到設計稿的時候第一時間想到的就是用canvas來做這個儀表盤，雖然本人的畫布用的不是很好但還可以寫一寫😀。話不多說直接上代碼。最后有純css方法

<!--wxml-->
<canvas canvas-id="circle" class="circle" >

// js
data: {canvasWidth: 285, // 畫布寬度canvasHeight: 285, // 畫布高度value: 60, // 當前得分
},/** 繪制儀表盤*/showCanvasRing() {var that = this;var ctx = wx.createCanvasContext("circle");ctx.clearRect(0, 0, that.data.canvasWidth, that.data.canvasHeight); // 清除畫布var circle_r = that.data.canvasWidth / 2; //畫布的一半，用來找中心點和半徑var scoreText = that.data.value>=100?100:that.data.value; // 當前得分 最多100分var descript = '良好'; // 當前描述var date = formatTime(new Date(),'MM-DD'); // 當前日期// 圓弧起點var startAngle = 0.8 * Math.PI;var endAngle = 2.2 * Math.PI;//定義起始點ctx.translate(that.data.canvasWidth / 2, that.data.canvasHeight / 2);// 畫圓背景ctx.beginPath();ctx.setStrokeStyle("#6bb7b9");ctx.fillStyle="#6bb7b9";ctx.setLineCap("round");ctx.arc(0, 0, circle_r,2*Math.PI);ctx.fill()ctx.stroke();ctx.closePath();//  白半邊圓弧ctx.beginPath();ctx.setStrokeStyle("#FFFFFF");ctx.setLineWidth(10);ctx.setLineCap("round");ctx.arc(0, 0, circle_r - 20, startAngle, endAngle, false);ctx.stroke();ctx.closePath();// 刻度for (let i = 0; i <= 10; i++) {let angle = startAngle + (endAngle - startAngle - 0.1) * (i * 10) / 100;if (angle > Math.PI * 2) {angle = angle - Math.PI * 2}const point = that.getPoint(0, 0, circle_r - 44, angle);const PI_3_2 = Math.PI * 1.5;const PI_1_2 = Math.PI * 0.5;ctx.save()ctx.setFillStyle("#fff");ctx.setFontSize(13);ctx.translate(point.x, point.y)const rotateDegrees = angle >= PI_3_2 ? (angle - PI_3_2) : (angle + PI_1_2);ctx.rotate(rotateDegrees)ctx.fillText(i * 10, 0, 0)ctx.restore()}// 當前得分內圓弧ctx.beginPath();ctx.setStrokeStyle("#FFA64D");ctx.setLineWidth(10);ctx.setLineCap("round");ctx.arc(0, 0, circle_r - 20, startAngle, startAngle + (endAngle - startAngle) * scoreText / 100, false);ctx.stroke();ctx.closePath();// 分數ctx.setTextAlign("center"); // 字體位置ctx.setFillStyle("#fff");ctx.font = "900 50px Arial"ctx.fillText(scoreText, 0, -20);// 描述ctx.setTextAlign("center"); // 字體位置ctx.font = "400 15px Arial"ctx.fillText(descript, 0, 15);// 日期ctx.setTextAlign("center");ctx.setLineWidth(8);ctx.setFontSize(14);ctx.fillText(date + ' 更新', 0, 35);// 繪圖ctx.draw();},getPoint: function (x, y, r, angle) {const x1 = x + r * Math.cos(angle);const y1 = y + r * Math.sin(angle);return {x: x1,y: y1}},

到此儀表盤就畫完了，最后需求有變動需要再儀表盤上加文本，眾所周知canvas在小程序中的層級很高。但是官方說可以使用cover-view | cover-image

 <canvas canvas-id="circle" class="circle" ><cover-view class="lowScore" wx:if="{{showView}}">目前信用分過低</cover-view></canvas>

經過驗證cover-view可以做到在canvas上懸浮，但是不能滿足所有需求；
比如要懸浮scroll-view ，總不能把內容全部用畫布來寫吧 ~ ~。也有人說可以將繪畫完成后的canvas轉成圖片進行顯示wx.canvasToTempFilePath。我同樣也試過但是會報錯：canvasToTempFilePath:fail fail canvas is empty，怎么解決試了好半天，由于項目著急也沒用太多時間研究了。所有最后我決定使用最原始的方法來實現。來看代碼吧 ↓ ↓

 <!--wxml-->
<view class="dashboard"><view class="dashboard-arc"><view class="dashboard-scale"><view wx:for="{{[0,10,20,30,40,50,60,70,80,90,100]}}" wx:key="item">{{item}}</view></view><view class="dashboard-arc-active" style="background: conic-gradient(#FFA64D 0, #FFA64D {{(value*0.75)}}%, transparent 0, transparent);"><view class="dashboard-arc-active-end" style="transform: translateX(-50%) rotate({{(value/100)*270}}deg);"></view></view></view><view class="dashboard-content"><view class="dashboard-content-title">{{value}}</view><view class="dashboard-content-text">{{state}}</view><view class="dashboard-content-desc">{{tool.formatTime(date,'MM-DD')}} 更新</view></view><view class="lowScore" wx:if="{{showView}}">目前信用分過低</view>
...要懸浮的內容
</view>

	/* 儀表盤 */.dashboard {width: 750rpx;height: 600rpx;background: rgba(70, 165, 168, 1);box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);text-align: center;position: relative;}.dashboard::before{content: '';width: 570rpx;height: 570rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #6bb7b9;border-radius: 50%;}.dashboard-arc{width: 520rpx;height: 520rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transform: translate(-50%, -50%) rotate(-135deg);border-radius: 50%;background: conic-gradient(#fff 0, #fff 75%, transparent 0, transparent);}.dashboard-arc::before,.dashboard-arc::after{content: "";position: absolute;width: 20rpx;height: 20rpx;border-radius: 50%;background: #fff;}.dashboard-arc::before{left: 50%;top: 0;background-color: #FFA64D;transform: translateX(-50%);}.dashboard-arc::after{left: 0;top: 50%;transform: translateY(-50%);}.dashboard-arc-active{position: absolute;width: 100%;height: 100%;border-radius: 50%;top: 0;left: 0;}.dashboard-arc-active-end{position: absolute;width: 20rpx;height:100%;top: 0;left: 50%;z-index: 1;}.dashboard-arc-active-end::before{content: '';width: 20rpx;height: 20rpx;position: absolute;top: 0;left: 0;background: #FFA64D;border-radius: 50%;}.dashboard-scale{background-color: #6bb7b9;width: 480rpx;height: 480rpx;border-radius: 50%;position: relative;top: 50%;left: 50%;z-index: 99;font-size: 20rpx;transform: translate(-50%, -50%);color: #fff;}.dashboard-scale>view{position: absolute;top: 50%;height:calc(100% - 10rpx);left: 50%;transform: translate(-50%,-50%);}.dashboard-scale>view:nth-child(2){transform:translate(-50%,-50%)rotate(27deg);}.dashboard-scale>view:nth-child(3){transform:translate(-50%,-50%)rotate(54deg);}.dashboard-scale>view:nth-child(4){transform:translate(-50%,-50%)rotate(81deg);}.dashboard-scale>view:nth-child(5){transform:translate(-50%,-50%)rotate(108deg);}.dashboard-scale>view:nth-child(6){transform:translate(-50%,-50%)rotate(135deg);}.dashboard-scale>view:nth-child(7){transform:translate(-50%,-50%)rotate(162deg);}.dashboard-scale>view:nth-child(8){transform:translate(-50%,-50%)rotate(189deg);}.dashboard-scale>view:nth-child(9){transform:translate(-50%,-50%)rotate(216deg);}.dashboard-scale>view:nth-child(10){transform:translate(-50%,-50%)rotate(243deg);}.dashboard-scale>view:nth-child(11){transform:translate(-50%,-50%)rotate(270deg);}.dashboard-content{position: absolute;width: 300rpx;height: 300rpx;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;border-radius: 50%;padding: 20rpx;}.dashboard-content-title{font-size: 115rpx;font-weight: 900;}.dashboard-content-text{font-size: 25rpx;}.dashboard-content-desc{font-size: 20rpx;}

以上就是所有代碼了，覺得對你有用的話就點個贊吧 ！
最后給大家推薦一個在線題庫小程序包含了阿里云認證、騰訊云認證、華為云認證、思科認證、銳捷認證、瓴羊認證、紅帽認證、軟考、IT認證等等