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" 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 labels = ['学历', '年龄', '工作地', '技能', '工作经验', '期望薪资'];
            const data = [education, age, location, skill, experience, salary].map((item) => item * 0.05);
            rawRadarChart(labels, data);
        }
    },
    { deep: true, immediate: false } // deep 递归监听对象内部变化
);

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 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.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.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');

    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.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>