feat: 雷达图展示优化

This commit is contained in:
2025-11-30 23:19:34 +08:00
parent 7910f274c7
commit f389397227
3 changed files with 53 additions and 3 deletions

View File

@@ -92,12 +92,34 @@ const RadarChart: React.FC = forwardRef((props, ref) => {
});
// === 数据区域 ===
// ctx.beginPath();
// values.forEach((val, i) => {
// const angle = ((Math.PI * 2) / labels.length) * i - Math.PI / 2;
// const r = (val / maxValue) * radius;
// const x = center.x + r * Math.cos(angle);
// const y = center.y + r * Math.sin(angle);
// if (i === 0) ctx.moveTo(x, y);
// else ctx.lineTo(x, y);
// });
// ctx.closePath();
// ctx.fillStyle = "rgba(0,200,180,0.3)";
// ctx.fill();
// ctx.strokeStyle = "#00c8b4";
// ctx.lineWidth = 3;
// ctx.stroke();
const baseRadius = (radius / levels) * 1; // 第二个环为起点
const usableRadius = radius - baseRadius;
ctx.beginPath();
values.forEach((val, i) => {
const angle = ((Math.PI * 2) / labels.length) * i - Math.PI / 2;
const r = (val / maxValue) * radius;
// 关键修改:值从第二个环开始
const r = baseRadius + (val / maxValue) * usableRadius;
const x = center.x + r * Math.cos(angle);
const y = center.y + r * Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
});

View File

@@ -236,6 +236,30 @@
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.06);
overflow: hidden;
position: relative;
&.customBtn {
.button {
opacity: 0;
position: absolute;
left: 0;
top: 0;
}
.customBtnCover {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-feature-settings: "liga" off, "clig" off;
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
}
.button {
display: flex;

View File

@@ -259,13 +259,16 @@ function Intro() {
<Image className={styles.arrowImage} src={ArrowRight} />
</Button>
</View>
<View className={styles.buttonWrap}>
<View className={classnames(styles.buttonWrap, styles.customBtn)}>
<Button
className={styles.button}
onClick={() => handleNext(StageType.RESULT)}
>
<Text>使</Text>
</Button>
<View className={styles.customBtnCover}>
<Text>使</Text>
</View>
</View>
</View>
</View>
@@ -682,7 +685,8 @@ function Result() {
</Text>
</View>
<View className={styles.slogan}>
<Text>线+</Text>
{/* <Text>变线+网前,下一步就是赢比赛!</Text> */}
<Text>{result?.level_description}</Text>
</View>
</View>
<View>