111

packageA/pages/post/component/radarMap.vue

@@ -1,13 +1,12 @@
 <template>
     <view style="display: flex; justify-content: center; padding: 0px 0">
-        <canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
+        <canvas canvas-id="radarCanvas" style="width: 600rpx; height: 500rpx"></canvas>
     </view>
 </template>
 
 <script setup>
 import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
-import { onLoad, onShow } from '@dcloudio/uni-app';
-// const src = ref('');
+import { onReady } from '@dcloudio/uni-app';
 
 const props = defineProps({
     value: {
@@ -41,7 +40,7 @@ function getRadarData() {
 }
 
 // 监听页面初始化
-onMounted(() => {
+onReady(() => {
     // 延迟执行，确保 canvas 已经渲染
     setTimeout(() => {
         const { labels, data } = getRadarData();
@@ -66,12 +65,10 @@ watch(
 
 function rawRadarChart(labels, data) {
     const ctx = uni.createCanvasContext('radarCanvas');
-    const width = 80;
-    const height = 80;
-    const centerX = 150;
-    const centerY = 125;
-    // const data = [2, 3.5, 5, 3.5, 5, 3.5]; // 示例数据
-    // const labels = ['火烧', '泡水', '事故', '外观', '部件', '火烧'];
+    const width = 150;
+    const height = 125;
+    const centerX = 300;
+    const centerY = 250;
     const colors = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'];
     const maxScore = 5; // 数据最大值
 
@@ -89,7 +86,6 @@ function rawRadarChart(labels, data) {
     ctx.fill();
 
     //多边形圈
-    // 多边形圈
     for (let i = 5; i > 0; i--) {
         ctx.setStrokeStyle(colors[i - 1]); // 设置边框颜色
         ctx.beginPath();
@@ -106,20 +102,14 @@ function rawRadarChart(labels, data) {
         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 x = centerX + width * Math.sin(angleStep * index);
-        const y = centerY + height * Math.cos(angleStep * index);
-
-        ctx.moveTo(x1, y1);
+        ctx.moveTo(centerX, centerY);
+        const x = centerX + width * Math.cos(angleStep * index - Math.PI / 2);
+        const y = centerY + height * Math.sin(angleStep * index - Math.PI / 2);
         ctx.lineTo(x, y);
-
         ctx.closePath();
         ctx.stroke();
     });
@@ -145,15 +135,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); // 半径 4
         ctx.fill();
     });
 
     // 绘制标签
     ctx.setTextAlign('center');
+    ctx.setTextBaseline('middle');
 
     labels.forEach((label, index) => {
         const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
@@ -162,33 +153,13 @@ function rawRadarChart(labels, data) {
         //标题
         ctx.setFillStyle('#000');
         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>
 
-<style></style>
+<style>
+/* 确保canvas容器有足够的空间 */
+</style>