qingdao-employment-service/packageA/pages/post/component/radarMap.vue

<template>
    <view class="radar" style="display: flex; justify-content: center; padding: 0px 0">
        <canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
// const src = ref('');

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

// 监听页面初始化
onMounted(() => {
    if (Object.keys(props.value).length > 0) {
        rawRadarChart();
    }
});

// 监听 props.value 变化
watch(
    () => props.value,
    (newVal) => {
        if (newVal && Object.keys(newVal).length > 0) {
            // const { skill, experience, education, salary, age, location } = newVal.radarChart;
            const { experience, education, salary, age, location } = newVal.radarChart;
            // const labels = ['学历', '年龄', '工作地', '技能', '工作经验', '期望薪资'];
            const labels = ['学历', '年龄', '工作地',  '工作经验', '期望薪资'];
            // const data = [education, age, location, skill, experience, salary].map((item) => item * 0.05);
            const data = [education, age, location,  experience, salary].map((item) => item * 0.05);
            rawRadarChart(labels, data);
        }
    },
    { deep: true, immediate: false } // deep 递归监听对象内部变化
);

function rawRadarChart(labels, data) {
    let ratio = window.innerWidth / 600;
    if (ratio < 1) ratio = 1;
    const ctx = uni.createCanvasContext('radarCanvas');
    const width = 80;
    const height = 80;
    const centerX = 150;
    const centerY = 125;
    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.setFillStyle('#F5F5F5');
        ctx.beginPath();

        // 修改坐标计算，使用与多边形圈相同的角度计算方式
        const x1 = centerX + width * 0.6 * Math.cos(angleStep * index - Math.PI / 2);
        const y1 = centerY + height * 0.6 * Math.sin(angleStep * index - Math.PI / 2);
        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);

        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);
        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 * ratio);
        ctx.font = `bold ${12 * ratio}px sans-serif`;
        ctx.fillText(label, x, y);
    });

    ctx.draw();
}
</script>

<style lang="scss" scoped>
@media (min-width: 800px) {
    .radar{
        padding-top: 30rpx !important;
    }
}
</style>