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();
|
ctx.beginPath();
|
||||||
values.forEach((val, i) => {
|
values.forEach((val, i) => {
|
||||||
const angle = ((Math.PI * 2) / labels.length) * i - Math.PI / 2;
|
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 x = center.x + r * Math.cos(angle);
|
||||||
const y = center.y + r * Math.sin(angle);
|
const y = center.y + r * Math.sin(angle);
|
||||||
|
|
||||||
if (i === 0) ctx.moveTo(x, y);
|
if (i === 0) ctx.moveTo(x, y);
|
||||||
else ctx.lineTo(x, y);
|
else ctx.lineTo(x, y);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -236,6 +236,30 @@
|
|||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
overflow: hidden;
|
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 {
|
.button {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -259,13 +259,16 @@ function Intro() {
|
|||||||
<Image className={styles.arrowImage} src={ArrowRight} />
|
<Image className={styles.arrowImage} src={ArrowRight} />
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.buttonWrap}>
|
<View className={classnames(styles.buttonWrap, styles.customBtn)}>
|
||||||
<Button
|
<Button
|
||||||
className={styles.button}
|
className={styles.button}
|
||||||
onClick={() => handleNext(StageType.RESULT)}
|
onClick={() => handleNext(StageType.RESULT)}
|
||||||
>
|
>
|
||||||
<Text>继续使用上次测试结果</Text>
|
<Text>继续使用上次测试结果</Text>
|
||||||
</Button>
|
</Button>
|
||||||
|
<View className={styles.customBtnCover}>
|
||||||
|
<Text>继续使用上次测试结果</Text>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
@@ -682,7 +685,8 @@ function Result() {
|
|||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.slogan}>
|
<View className={styles.slogan}>
|
||||||
<Text>变线+网前,下一步就是赢比赛!</Text>
|
{/* <Text>变线+网前,下一步就是赢比赛!</Text> */}
|
||||||
|
<Text>{result?.level_description}</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View>
|
<View>
|
||||||
|
|||||||
Reference in New Issue
Block a user