rate: {
	sum: 100, // 總計
	val: 80, //實際值
	pre: 15,
	valArr: 0,
	canvas: "xxxxx",
	}

Progressbar(rate) {
	//根據後臺獲取到的資料計算比例
	let sum = canvas.sum == 0 ? 1 : canvas.sum; // 總計
	let newVal = parseFloat(((canvas.val / sum) * 100).toFixed(0)); //展示概率
	let val = parseFloat(((canvas.valArr / sum) * 2).toFixed(1)); //實際
	const ctx = uni.createCanvasContext(canvas.canvas); //拿到canvas物件（自己的定義的canvas-id）
	// 開始繪製第一條路徑 總數 紅色
	ctx.beginPath(); // 開始繪製路徑
	ctx.arc(25, 25, 22, 0, 3 * Math.PI); // arc畫圓
	ctx.setStrokeStyle("#f2f2f2"); // 線條顏色
	ctx.setLineWidth(5); // 線條寬度
	ctx.stroke(); // 繪製成線條（fill()是填充為餅圖）
	// 開始繪製第二條路徑 成交 橘色
	ctx.beginPath();
	ctx.arc(25, 25, 22, 0, val * Math.PI);
	ctx.setStrokeStyle("#ff7400");
	ctx.setLineWidth(5);
	ctx.stroke();
	// 填充字型-367
	ctx.setFillStyle("#FF7400");
	ctx.setFontSize(14);
	ctx.setTextAlign("center");
	ctx.fillText(newVal, 20, 25);
	ctx.stroke();
	// 填充字型-累計推薦
	ctx.setFillStyle("#FF7400");
	ctx.setFontSize(12);
	ctx.fillText("%", 35, 25);
	ctx.stroke();
	// 填充字型
	ctx.setFillStyle("#FF7400");
	ctx.setFontSize(10);
	ctx.fillText("完成率", 25, 35);
	ctx.stroke();
	// 渲染
	ctx.draw();
	//繪製動畫效果
	if (canvas.valArr < canvas.val) {
	　　canvas.valArr = canvas.valArr + 5;
	　　if (canvas.valArr > canvas.val) {
	　　　　canvas.valArr = canvas.val;
	　　　　return;
	　　}
	}
	if (canvas.valArr <= canvas.val) {
	　　setTimeout(() => {
		this.Progressbar(canvas);
		}, 20);
	}
}