1

src/components/Radar/index.tsx

@@ -38,6 +38,13 @@ const RadarChart: React.FC = forwardRef((props, ref) => {
         canvas.width = res[0].width * dpr;
         canvas.height = res[0].height * dpr;
         ctx.scale(dpr, dpr);
+        
+        // 启用抗锯齿，消除锯齿
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        // 设置线条端点样式为圆形，减少锯齿
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
 
         // === 绘制圆形网格 ===
         for (let i = levels; i >= 1; i--) {
@@ -51,7 +58,19 @@ const RadarChart: React.FC = forwardRef((props, ref) => {
             ctx.fillStyle = "#CAFCF0";
             ctx.fill();
           }
-          ctx.strokeStyle = "#bbb";
+          // 根据层级设置不同的线条颜色，中间圆圈使用更浅的颜色
+          if (i === 1) {
+            // 最内圈使用最浅的颜色
+            ctx.strokeStyle = "#E5E5E5";
+          } else if (i <= 3) {
+            // 中间圆圈使用较浅的颜色
+            ctx.strokeStyle = "#E0E0E0";
+          } else {
+            // 外圈使用稍深但仍然较浅的颜色
+            ctx.strokeStyle = "#D5D5D5";
+          }
+          // 设置线条宽度为1px，确保清晰
+          ctx.lineWidth = 1;
           ctx.stroke();
         }
 
@@ -65,7 +84,9 @@ const RadarChart: React.FC = forwardRef((props, ref) => {
           ctx.beginPath();
           ctx.moveTo(center.x, center.y);
           ctx.lineTo(x, y);
-          ctx.strokeStyle = "#bbb";
+          // 坐标轴线条也使用较浅的颜色，与圆圈保持一致
+          ctx.strokeStyle = "#E0E0E0";
+          ctx.lineWidth = 1;
           ctx.stroke();
 
           // 标签