`drawMain(drawing_elem, percent, forecolor, bgcolor,fillColor) {/*@drawing_elem: 繪制對象@percent：繪制圓環百分比, 范圍[0, 100]@forecolor: 繪制圓環的前景色，顏色代碼@bgcolor: 繪制圓環的背景色，顏色代碼*/var context = drawing_elem.getContext('2d')var center_x = drawing_elem.width / 2;var center_y = drawing_elem.height / 2;var rad = Math.PI/3*5/100; //繪制的為300度的圓// 65 * Math.PI / 180, 115 * Math.PI / 180// var speed = 0;// 繪制背景圓圈function backgroundCircle(){context.save();context.beginPath();context.lineWidth = 8; //設置線寬var radius = center_x - context.lineWidth;context.lineCap = "round";context.strokeStyle = bgcolor;context.arc(center_x, center_y, radius,-Math.PI/180*240, Math.PI/180*60, false);**起點，終點，半徑，開始點，結束點，是否順/逆時針**context.stroke();context.closePath();context.restore();}//繪制運動圓環function foregroundCircle(n){context.save();context.strokeStyle = forecolor;context.lineWidth = 8;context.lineCap = "round";var radius = center_x - context.lineWidth;// console.log(endAngle)context.beginPath();context.arc(center_x, center_y, radius ,-Math.PI/180*240 ,-Math.PI/180*240+n*rad , false); //用于繪制圓弧context.arc(x坐標，y坐標，半徑，起始角度，終止角度，順時針/逆時針)context.stroke();context.closePath();context.restore();}//繪制文字function text(n){context.save(); //save和restore可以保證樣式屬性只運用于該段canvas元素context.fillStyle = fillColor;var font_size = 20;context.font = font_size + "px Helvetica";var text_width = context.measureText(n.toFixed(0)+"%").width;context.fillText(n.toFixed(0)+"%", center_x-text_width/2, center_y + font_size/2);context.restore();}//執行動畫(function drawFrame(){// 去掉動畫加載效果// window.requestAnimationFrame(drawFrame);// context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);backgroundCircle();text(percent);foregroundCircle(percent);**// 去掉動畫加載效果，這兩行代碼，由于網速加載慢的時候繪制的比較慢，動態效果繪制的太緩慢，所以去掉了**// if(speed >= percent) return;// speed += 1;}());},

this.$nextTick(()=>{for(var i =0;i<this.couponCenterLists.length;i++) {this.childrenTag = document.getElementById("time-graph-canvas"+i);let score = this.couponCenterLists[i].couponPercentage * 100;this.drawMain(this.childrenTag, score, "#fff", "rgba(255,255,255,0.4)","#fff");**score變量是我從接口取出來的數據存到了score變量中**}})