ks-app-employment-service/packageA/pages/post/component/radarMap.vue

<template>
    <view style="display: flex; justify-content: center; padding: 0px 0">
        <canvas canvas-id="radarCanvas" style="width: 600rpx; height: 500rpx"></canvas>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onReady } from '@dcloudio/uni-app';

const props = defineProps({
    value: {
        type: Object,
        default: () => ({}),
    },
});

// 获取雷达图数据
function getRadarData() {
    if (!props.value || !props.value.radarChart) {
        // 如果没有数据，使用默认值0
        const defaultRadarChart = {
            skill: 0,
            experience: 0,
            education: 0,
            salary: 0,
            age: 0,
            location: 0
        };
        const labels = ['学历', '年龄', '工作地', '技能', '工作经验', '期望薪资'];
        const data = [defaultRadarChart.education, defaultRadarChart.age, defaultRadarChart.location, 
                      defaultRadarChart.skill, defaultRadarChart.experience, defaultRadarChart.salary].map((item) => item * 0.05);
        return { labels, data };
    }
    
    const { skill, experience, education, salary, age, location } = props.value.radarChart;
    const labels = ['学历', '年龄', '工作地', '技能', '工作经验', '期望薪资'];
    const data = [education, age, location, skill, experience, salary].map((item) => item * 0.05);
    return { labels, data };
}

// 监听页面初始化
onReady(() => {
    // 延迟执行，确保 canvas 已经渲染
    setTimeout(() => {
        const { labels, data } = getRadarData();
        rawRadarChart(labels, data);
    }, 100);
});

// 监听 props.value 变化
watch(
    () => props.value,
    (newVal) => {
        if (newVal) {
            // 延迟执行，确保数据更新完成
            setTimeout(() => {
                const { labels, data } = getRadarData();
                rawRadarChart(labels, data);
            }, 50);
        }
    },
    { deep: true, immediate: true } // deep 递归监听对象内部变化，immediate 立即执行一次
);

function rawRadarChart(labels, data) {
    const ctx = uni.createCanvasContext('radarCanvas');
    const width = 150;
    const height = 125;
    const centerX = 300;
    const centerY = 250;
    const colors = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'];
    const maxScore = 5; // 数据最大值

    const angleStep = (2 * Math.PI) / labels.length;

    // 绘制背景多边形
    ctx.setLineWidth(1);
    ctx.setStrokeStyle('#F6F6F6');

    //底部圆盘
    ctx.beginPath();
    ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
    ctx.setFillStyle('#FFFFFF');
    ctx.closePath();
    ctx.fill();

    //多边形圈
    for (let i = 5; i > 0; i--) {
        ctx.setStrokeStyle(colors[i - 1]); // 设置边框颜色
        ctx.beginPath();
        labels.forEach((label, index) => {
            const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
            const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
            if (index === 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        });
        ctx.closePath();
        ctx.stroke(); // 只描边，不填充
    }

    // 绘制连接线
    labels.forEach((label, index) => {
        ctx.setStrokeStyle('#F5F5F5');
        ctx.beginPath();
        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();
    });

    // 绘制雷达图数据
    ctx.setStrokeStyle('#256BFA');
    ctx.setFillStyle('rgba(37,107,250, 0.24)');
    ctx.setLineWidth(2);
    ctx.beginPath();
    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 }); // 保存位置
        if (index === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    });
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    // 绘制每个小圆点
    ctx.setFillStyle('#256BFA'); // 小圆点颜色
    pointList.forEach((point) => {
        ctx.beginPath();
        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);
        const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);

        //标题
        ctx.setFillStyle('#000');
        ctx.setFontSize(12);
        ctx.fillText(label, x, y);
    });

    ctx.draw();
}
</script>

<style>
/* 确保canvas容器有足够的空间 */
</style>