微信小程序开发-手绘雷达图案例源码.zip

let width = 750; // canvas的宽 let height = 750; // canvas的高 let angleNum = 7; // 角数，即多少个数据项 【3，10】 let angleAvg = 360 / angleNum; // 分角度平均值 let angleOffset = 13; // 角度偏移量 let layerNum = 7; // 层数，即环层数量 let layerWidth = 0; // 层宽 let bgLineColor = '#ffffff'; // 背景线条颜色 let bgLineWidth = 0; // 背景线条宽度 let centerPoint = [0, 0]; // 中心点坐标 let layerPoints = []; // 各层上的点 let wordColor = '#ffffff'; // 字体颜色 let fontSize = 0; // 字体大小 let wordArr = ['项A', '项B', '项C', '项D', '项E', '项F', '项G']; // 字体数组 let wordOffset = [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]; let circleWidth = 0; // 圆点宽度 // 绘制的雷达比例数据 let dataArr = [5, 2, 6, 2, 6, 0, 3]; let context =null; let windowWidth = 0; let radar = { init: function(data) { centerPoint = [rpx(375), rpx(375)]; layerWidth = rpx(34); bgLineWidth = rpx(1.6); fontSize = rpx(26); circleWidth = rpx(8); wordOffset = [ [rpx(-30), rpx(40)], [rpx(40), rpx(40)], [rpx(65), rpx(10)], [rpx(90), rpx(0)], [rpx(-25), rpx(15)], [rpx(15), rpx(-5)], [rpx(10), rpx(15)] ]; }, draw: function(data) { let n = 0, m = 0, k = 0; this.init(data); //画背景线条 context = wx.createContext(); context.setLineWidth(bgLineWidth); context.setStrokeStyle(bgLineColor); context.beginPath(); context.setFontSize(fontSize); context.setFillStyle(wordColor); for(n = 0; n < layerNum; n++) { layerPoints[n] = []; for(k = 0; k < angleNum; k++) { context.moveTo(centerPoint[0], centerPoint[1]); let offsetX = layerWidth * (n + 1) * getXParam(angleAvg * (k + 1) + angleOffset); let offsetY = layerWidth * (n + 1) * getYParam(angleAvg * (k + 1) + angleOffset); let distX = centerPoint[0] + offsetX; let distY = centerPoint[1] + offsetY; if(n == layerNum - 1) { context.lineTo(distX, distY); if(wordArr[k]) { let wordOffsetX = offsetX >= 0 ? 1 : -1; wordOffsetX = distX + wordOffsetX * wordOffset[k][0]; let wordOffsetY = offsetY >= 0 ? 1 : -1; wordOffsetY = distY + wordOffsetY * wordOffset[k][1]; context.fillText(wordArr[k], wordOffsetX, wordOffsetY); } } layerPoints[n][k] = [distX, distY]; } } for(m = 0; m < layerPoints.length; m++) { for(n = 0; n < layerPoints[m].length; n++) { context.moveTo(layerPoints[m][n][0], layerPoints[m][n][1]); if(n < layerPoints[m].length - 1) { context.lineTo(layerPoints[m][n + 1][0], layerPoints[m][n + 1][1]); } else { context.moveTo(layerPoints[m][n][0], layerPoints[m][n][1]); context.lineTo(layerPoints[m][0][0], layerPoints[m][0][1]); } } } context.stroke(); // 绘制比例: context.beginPath(); context.setStrokeStyle("rgba(77,168,213,0.85)"); context.setFillStyle("rgba(77,168,213,0.85)"); let isFirstPoint = true; let tmpPoints = []; for(m = 0; m < angleNum; m++) { tmpPoints = centerPoint; if(dataArr[m] > 0) { for(n = 0; n < layerNum; n++) { if(dataArr[m] == (n + 1)) { tmpPoints = layerPoints[n][m]; break; } } } if(isFirstPoint) { context.moveTo(tmpPoints[0], tmpPoints[1]); isFirstPoint = false; } else { context.lineTo(tmpPoints[0], tmpPoints[1]); } } context.fill(); context.stroke(); context.closePath(); // 绘制圆点： for(m = 0; m < angleNum; m++) { tmpPoints = centerPoint; if(dataArr[m] > 0) { for(n = 0; n < layerNum; n++) { if(dataArr[m] == (n + 1)) { tmpPoints = layerPoints[n][m]; break; } } } context.beginPath(); context.setStrokeStyle("rgba(61,147,189,0.9)"); context.setFillStyle("rgba(61,147,189,0.9)"); context.closePath(); context.arc(tmpPoints[0], tmpPoints[1], circleWidth, 0, 2 * Math.PI, false); context.closePath(); context.fill(); context.stroke(); } wx.drawCanvas({ canvasId: 'radarCanvas', actions: context.getActions() }); } }; let rpx = (param) => { if(windowWidth == 0) { wx.getSystemInfo({ success: function (res) { windowWidth = res.windowWidth; } }); } return Number((windowWidth / 750 * param).toFixed(2)); }; let getXParam = (angle) => { let param = 1; if(angle >= 0 && angle < 90) { param = 1; } else if(angle >= 90 && angle < 180) { param = -1; angle = 180 - angle; } else if(angle >= 180 && angle < 270) { param = -1; angle = angle - 180; } else if(angle >= 270 && angle <= 360) { param = 1; angle = 360 - angle; } let angleCos = Math.cos(Math.PI / 180 * angle); if(angleCos < 0) { angleCos = angleCos * -1; } return angleCos * param; }; let getYParam = (angle) => { let param = 1; if(angle >= 0 && angle < 90) { param = 1; } else if(angle >= 90 && angle < 180) { param = 1; angle = 180 - angle; } else if(angle >= 180 && angle < 270) { param = -1; angle = angle - 180; } else if(angle >= 270 && angle <= 360) { param = -1; angle = 360 - angle; } let angleSin = Math.sin(Math.PI / 180 * angle); if(angleSin < 0) { angleSin = angleSin * -1; } return angleSin * param; }; module.exports = { radar };