bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修改雷达图为圆形

Browse Source
This commit is contained in:
刘杰
2025-09-26 15:34:18 +08:00
parent 3cc2a24be5
commit 151000087d
1 changed files with 10 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/Radar/index.tsx
View File

@@ -28,89 +28,39 @@ const RadarChart: React.FC = () => {
.exec((res) => {
const canvas = res[0].node as HTMLCanvasElement;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
// 设置像素比，保证清晰
const dpr = Taro.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr, dpr);
// 绘制网格
ctx.strokeStyle = "#ddd";
// for (let i = 1; i <= levels; i++) {
// const r = (radius / levels) * i;
// ctx.beginPath();
// labels.forEach((_, j) => {
// const angle = ((Math.PI * 2) / labels.length) * j - Math.PI / 2;
// const x = center.x + r * Math.cos(angle);
// const y = center.y + r * Math.sin(angle);
// if (j === 0) ctx.moveTo(x, y);
// else ctx.lineTo(x, y);
// });
// ctx.closePath();
// ctx.stroke();
// }
// === 绘制圆形网格 ===
for (let i = 1; i <= levels; i++) {
const r = (radius / levels) * i;
ctx.beginPath();
labels.forEach((_, j) => {
const angle = ((Math.PI * 2) / labels.length) * j - Math.PI / 2;
const x = center.x + r * Math.cos(angle);
const y = center.y + r * Math.sin(angle);
if (j === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
});
ctx.closePath();
// === 偶数环填充颜色 ===
ctx.arc(center.x, center.y, r, 0, Math.PI * 2);
if (i % 2 === 0) {
ctx.fillStyle = "rgba(0, 150, 200, 0.1)"; // 浅色填充，透明度可调
ctx.fillStyle = "rgba(0, 150, 200, 0.1)";
ctx.fill();
}
// 保留线条
ctx.strokeStyle = "#bbb"; // 边框颜色
ctx.strokeStyle = "#bbb";
ctx.stroke();
}
// 坐标轴 & 标签
ctx.fillStyle = "#333";
ctx.font = "12px sans-serif";
// labels.forEach((label, i) => {
// const angle = ((Math.PI * 2) / labels.length) * i - Math.PI / 2;
// const x = center.x + radius * Math.cos(angle);
// const y = center.y + radius * Math.sin(angle);
// ctx.beginPath();
// ctx.moveTo(center.x, center.y);
// ctx.lineTo(x, y);
// ctx.strokeStyle = "#bbb";
// ctx.stroke();
// ctx.fillText(
// label,
// x + Math.cos(angle) * 20,
// y + Math.sin(angle) * 20
// );
// });
// === 坐标轴 & 标签 ===
labels.forEach((label, i) => {
const angle = ((Math.PI * 2) / labels.length) * i - Math.PI / 2;
// 线条终点（半径）
const x = center.x + radius * Math.cos(angle);
const y = center.y + radius * Math.sin(angle);
// 画坐标轴线
// 坐标轴
ctx.beginPath();
ctx.moveTo(center.x, center.y);
ctx.lineTo(x, y);
ctx.strokeStyle = "#bbb";
ctx.stroke();
// === 改造后的文字位置 ===
const offset = 10; // 标签离图形的距离
// 标签
const offset = 10;
const textX = center.x + (radius + offset) * Math.cos(angle);
const textY = center.y + (radius + offset) * Math.sin(angle);
@@ -118,25 +68,18 @@ const RadarChart: React.FC = () => {
ctx.fillStyle = "#333";
ctx.textBaseline = "middle";
console.log(label, angle)
// 根据角度调整文字对齐方式
if (Math.abs(angle) < 0.01 || Math.abs(Math.abs(angle) - Math.PI) < 0.01) {
// 顶部或底部
ctx.textAlign = "center";
} else if (angle > -Math.PI / 2 && angle < Math.PI / 2) {
// 右侧
ctx.textAlign = "left";
} else {
// 左侧
ctx.textAlign = "right";
}
ctx.fillText(label, textX, textY);
});
// 数据区域
// === 数据区域 ===
ctx.beginPath();
values.forEach((val, i) => {
const angle = ((Math.PI * 2) / labels.length) * i - Math.PI / 2;
@@ -155,6 +98,7 @@ const RadarChart: React.FC = () => {
});
});
// 保存为图片
const saveImage = () => {
Taro.canvasToTempFilePath({