var res = null;var colors = ['red','yellow','blue','green'];//顏色var total = 0;//宣告資料總量var arr = [78,54,68,85];//資料來源var radius = 100;//定義半徑var point = {x:0, y:150};//定義圓心var star = 0;//宣告起點弧度var stops = 0;var starts = 0;var ends = 0; const ctx = wx.createCanvasContext('mycanvas');//建立上下文Page({
/** * 頁面的初始資料 */ data: { screen_width: 375, screen_height: 603 },
/** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { var that = this; res = wx.getSystemInfoSync({//獲取裝置資訊 success: (res) =>{ let screen_width = res.screenWidth; let screen_height = res.screenHeight; that.setData({ screen_width, screen_height }) } }) that.doit(); that.numrun(); ctx.draw(); }, doit: function(){ point.x = res.screenWidth / 2;//圓心X座標 for(var i=0; i<arr.length; i++){ //計算總量 total += arr[i]; } for(var j=0; j<arr.length; j++){ ctx.beginPath();//開啟路徑 stops += arr[j] / total * 2 * Math.PI;//結束弧度 //console.log(stops) //console.log(2 * Math.PI) ctx.arc(point.x, point.y, radius, star, stops, false);//繪製弧度，引數：圓心X座標、圓心Y座標、半徑、開始位置、結束位置、是否是順時針 ctx.lineTo(point.x, point.y);//方法增加一個新點，然後建立一條從上次指定點到目標點的線。 ctx.stroke();//連線的線條 ctx.setFillStyle(colors[j]);//對應填充的顏色 ctx.fill();//對當前路徑中的內容進行填充。預設的填充色為黑色。 ctx.closePath();//關閉當前路徑 star += arr[j] / total * 2 * Math.PI;//下一個區域的開始弧度點，當前需要弧度佔總數的多少 } // ctx.draw();//將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。 }, numrun: function() { point.x = res.screenWidth / 2;//圓心X座標 ctx.translate(point.x, point.y);//設定圓心 for (var i = 0; i < arr.length; i++) { //計算總量 total += arr[i]; } for(var i=0;i<arr.length;i++){ ctx.beginPath();//開啟路徑 starts = arr[i] / total * Math.PI /0.5; var m = arr[i] / total * 100 ; ctx.rotate(ends + starts);//旋轉數值 ctx.font = "15px scans-serif"; ctx.fillStyle = "aqua";//設定字型顏色 console.log(m) ctx.fillText(m.toFixed(2) + "%", 40, 10);//填充數字 ends = arr[i] / total * Math.PI / 0.5; ctx.closePath();//關閉當前路徑 } }})