diff --git a/src/components/Radar/index.tsx b/src/components/Radar/index.tsx index 9f86d43..a8a4f0b 100644 --- a/src/components/Radar/index.tsx +++ b/src/components/Radar/index.tsx @@ -28,89 +28,39 @@ const RadarChart: React.FC = () => { .exec((res) => { const canvas = res[0].node as HTMLCanvasElement; const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; - - // 设置像素比,保证清晰 const dpr = Taro.getSystemInfoSync().pixelRatio; canvas.width = res[0].width * dpr; canvas.height = res[0].height * dpr; ctx.scale(dpr, dpr); - // 绘制网格 - ctx.strokeStyle = "#ddd"; - // for (let i = 1; i <= levels; i++) { - // const r = (radius / levels) * i; - // ctx.beginPath(); - // labels.forEach((_, j) => { - // const angle = ((Math.PI * 2) / labels.length) * j - Math.PI / 2; - // const x = center.x + r * Math.cos(angle); - // const y = center.y + r * Math.sin(angle); - // if (j === 0) ctx.moveTo(x, y); - // else ctx.lineTo(x, y); - // }); - // ctx.closePath(); - // ctx.stroke(); - // } - + // === 绘制圆形网格 === for (let i = 1; i <= levels; i++) { const r = (radius / levels) * i; ctx.beginPath(); - labels.forEach((_, j) => { - const angle = ((Math.PI * 2) / labels.length) * j - Math.PI / 2; - const x = center.x + r * Math.cos(angle); - const y = center.y + r * Math.sin(angle); - if (j === 0) ctx.moveTo(x, y); - else ctx.lineTo(x, y); - }); - ctx.closePath(); - - // === 偶数环填充颜色 === + ctx.arc(center.x, center.y, r, 0, Math.PI * 2); if (i % 2 === 0) { - ctx.fillStyle = "rgba(0, 150, 200, 0.1)"; // 浅色填充,透明度可调 + ctx.fillStyle = "rgba(0, 150, 200, 0.1)"; ctx.fill(); } - - // 保留线条 - ctx.strokeStyle = "#bbb"; // 边框颜色 + ctx.strokeStyle = "#bbb"; ctx.stroke(); } - - - // 坐标轴 & 标签 - ctx.fillStyle = "#333"; - ctx.font = "12px sans-serif"; - // labels.forEach((label, i) => { - // const angle = ((Math.PI * 2) / labels.length) * i - Math.PI / 2; - // const x = center.x + radius * Math.cos(angle); - // const y = center.y + radius * Math.sin(angle); - // ctx.beginPath(); - // ctx.moveTo(center.x, center.y); - // ctx.lineTo(x, y); - // ctx.strokeStyle = "#bbb"; - // ctx.stroke(); - // ctx.fillText( - // label, - // x + Math.cos(angle) * 20, - // y + Math.sin(angle) * 20 - // ); - // }); - + // === 坐标轴 & 标签 === labels.forEach((label, i) => { const angle = ((Math.PI * 2) / labels.length) * i - Math.PI / 2; - - // 线条终点(半径) const x = center.x + radius * Math.cos(angle); const y = center.y + radius * Math.sin(angle); - // 画坐标轴线 + // 坐标轴 ctx.beginPath(); ctx.moveTo(center.x, center.y); ctx.lineTo(x, y); ctx.strokeStyle = "#bbb"; ctx.stroke(); - // === 改造后的文字位置 === - const offset = 10; // 标签离图形的距离 + // 标签 + const offset = 10; const textX = center.x + (radius + offset) * Math.cos(angle); const textY = center.y + (radius + offset) * Math.sin(angle); @@ -118,25 +68,18 @@ const RadarChart: React.FC = () => { ctx.fillStyle = "#333"; ctx.textBaseline = "middle"; - console.log(label, angle) - - // 根据角度调整文字对齐方式 if (Math.abs(angle) < 0.01 || Math.abs(Math.abs(angle) - Math.PI) < 0.01) { - // 顶部或底部 ctx.textAlign = "center"; } else if (angle > -Math.PI / 2 && angle < Math.PI / 2) { - // 右侧 ctx.textAlign = "left"; } else { - // 左侧 ctx.textAlign = "right"; } ctx.fillText(label, textX, textY); }); - - // 数据区域 + // === 数据区域 === ctx.beginPath(); values.forEach((val, i) => { const angle = ((Math.PI * 2) / labels.length) * i - Math.PI / 2; @@ -155,6 +98,7 @@ const RadarChart: React.FC = () => { }); }); + // 保存为图片 const saveImage = () => { Taro.canvasToTempFilePath({