fix : 雷达图渲染

packageA/pages/post/component/radarMap.vue

@@ -46,10 +46,8 @@ function rawRadarChart(labels, data) {
     const height = 80;
     const centerX = 150;
     const centerY = 125;
-    // const data = [2, 3.5, 5, 3.5, 5, 3.5]; // 示例数据
-    // const labels = ['火烧', '泡水', '事故', '外观', '部件', '火烧'];
     const colors = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'];
-    const maxScore = 5; // 数据最大值
+    const maxScore = 5;
 
     const angleStep = (2 * Math.PI) / labels.length;
 
@@ -64,10 +62,9 @@ function rawRadarChart(labels, data) {
     ctx.closePath();
     ctx.fill();
 
-    //多边形圈
     //多边形圈
     for (let i = 5; i > 0; i--) {
-        ctx.setStrokeStyle(colors[i - 1]); // 设置边框颜色
+        ctx.setStrokeStyle(colors[i - 1]);
         ctx.beginPath();
         labels.forEach((label, index) => {
             const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
@@ -79,19 +76,20 @@ function rawRadarChart(labels, data) {
             }
         });
         ctx.closePath();
-        ctx.stroke(); // 只描边，不填充
+        ctx.stroke();
     }
 
-    // //竖线
+    //竖线
     labels.forEach((label, index) => {
         ctx.setStrokeStyle('#F5F5F5');
         ctx.setFillStyle('#F5F5F5');
         ctx.beginPath();
 
-        const x1 = centerX + width * 0.6 * Math.sin(angleStep * index);
+        // 修改坐标计算，使用与多边形圈相同的角度计算方式
-        const y1 = centerY + height * 0.6 * Math.cos(angleStep * index);
+        const x1 = centerX + width * 0.6 * Math.cos(angleStep * index - Math.PI / 2);
-        const x = centerX + width * Math.sin(angleStep * index);
+        const y1 = centerY + height * 0.6 * Math.sin(angleStep * index - Math.PI / 2);
-        const y = centerY + height * Math.cos(angleStep * index);
+        const x = centerX + width * Math.cos(angleStep * index - Math.PI / 2);
+        const y = centerY + height * Math.sin(angleStep * index - Math.PI / 2);
 
         ctx.moveTo(x1, y1);
         ctx.lineTo(x, y);
@@ -105,11 +103,11 @@ function rawRadarChart(labels, data) {
     ctx.setFillStyle('rgba(37,107,250, 0.24)');
     ctx.setLineWidth(2);
     ctx.beginPath();
-    const pointList = []; // 记录每个点的位置，等会画小圆点
+    const pointList = [];
     data.forEach((score, index) => {
         const x = centerX + width * (score / maxScore) * Math.cos(angleStep * index - Math.PI / 2);
         const y = centerY + height * (score / maxScore) * Math.sin(angleStep * index - Math.PI / 2);
-        pointList.push({ x, y }); // 保存位置
+        pointList.push({ x, y });
         if (index === 0) {
             ctx.moveTo(x, y);
         } else {
@@ -121,15 +119,16 @@ function rawRadarChart(labels, data) {
     ctx.stroke();
 
     // 绘制每个小圆点
-    ctx.setFillStyle('#256BFA'); // 小圆点颜色（你可以改）
+    ctx.setFillStyle('#256BFA');
     pointList.forEach((point) => {
         ctx.beginPath();
-        ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI); // 半径 4，可以自己调大小
+        ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI);
         ctx.fill();
     });
 
     // 绘制标签 
     ctx.setTextAlign('center');
+    ctx.setTextBaseline('middle');
 
     labels.forEach((label, index) => {
         const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
@@ -140,30 +139,9 @@ function rawRadarChart(labels, data) {
         ctx.setFontSize(12);
         ctx.font = 'bold 12px sans-serif';
         ctx.fillText(label, x, y);
-
-        // ctx.setFillStyle('#A2A4A2');
-        // ctx.font = '12px sans-serif';
-        // ctx.setFontSize(12);
-        // ctx.fillText(data[index], x, y + 16);
     });
 
     ctx.draw();
-
-    //转图片
-
-    // uni.canvasToTempFilePath({
-    //     x: 0,
-    //     y: 0,
-    //     width: 320,
-    //     height: 320,
-    //     destWidth: 840,
-    //     destHeight: 840,
-    //     canvasId: 'radarCanvas',
-    //     success: (res) => {
-    //         // 在H5平台下，tempFilePath 为 base64
-    //         src = res.tempFilePath;
-    //     },
-    // });
 }
 </script>