168 lines
5.0 KiB
Vue
168 lines
5.0 KiB
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>
|