diff --git a/src/pages/index.vue b/src/pages/index.vue
index f4cb3f0..b2cbe40 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -167,7 +167,7 @@ onShareTimeline(() => {
-
+
-
+
diff --git a/src/pages/rank-list.vue b/src/pages/rank-list.vue
index 15b2d4e..e34029b 100644
--- a/src/pages/rank-list.vue
+++ b/src/pages/rank-list.vue
@@ -85,7 +85,11 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
@scroll="onScrollView"
:style="{ height: myData.userId ? '90vh' : '100vh' }"
>
-
+
{
}
return 0;
};
+
+// 绘制热力图
+export const drawHeatMap = (width, height, arrows) => {
+ try {
+ const ctx = uni.createCanvasContext("heatMapCanvas");
+
+ let minCount = 0;
+ let maxCount = 0;
+ // 计算最大和最小频次
+ arrows.forEach((point) => {
+ if (point.count > maxCount) {
+ maxCount = point.count;
+ }
+ if (point.count < minCount) {
+ minCount = point.count;
+ }
+ });
+ // 绘制热力点
+ arrows.forEach((point) => {
+ if (point.x === 0 && point.y === 0) return;
+ // 数量越多,半径越小(反比关系)
+ const radius = 20;
+
+ // 根据频次设置同一种颜色的5个深浅度
+ let color = "rgba(255, 232, 143, 0.2)";
+ // if (point.count >= maxCount * 0.5) {
+ // color = "rgba(255, 232, 143, 0.7)"; // 最深 - 频次5次及以上
+ // } else if (point.count >= maxCount * 0.4) {
+ // color = "rgba(255, 232, 143, 0.5)"; // 较深 - 频次4次
+ // } else if (point.count >= maxCount * 0.3) {
+ // color = "rgba(255, 232, 143, 0.3)"; // 中等 - 频次3次
+ // } else if (point.count >= maxCount * 0.2) {
+ // color = "rgba(255, 232, 143, 0.2)"; // 较浅 - 频次2次
+ // } else {
+ // color = "rgba(255, 232, 143, 0.1)"; // 最浅 - 频次1次
+ // }
+
+ // 绘制圆形热力点
+ ctx.setFillStyle(color);
+ ctx.beginPath();
+ ctx.arc(point.x * width, point.y * height, radius, 0, 2 * Math.PI);
+ ctx.fill();
+ });
+
+ ctx.draw();
+ } catch (error) {
+ console.error("绘制热力图失败:", error);
+ }
+};