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); + } +};