feat: 雷达图展示优化
This commit is contained in:
@@ -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);
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user