完成热力图绘制

src/pages/point-book.vue

@@ -14,6 +14,8 @@ import {
   getPointBookStatisticsAPI,
 } from "@/apis";
 
+import { getElementRect } from "@/util";
+
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -27,6 +29,7 @@ const isIOS = computed(() => {
 
 const showModal = ref(false);
 const data = ref({
+  yellowRate: 0,
   weeksCheckIn: [],
 });
 
@@ -42,38 +45,47 @@ const toListPage = () => {
 // 热力图数据
 const heatMapData = ref([
   { x: 150, y: 150, ring: 10, count: 5 },
-  { x: 140, y: 160, ring: 9, count: 3 },
-  { x: 160, y: 140, ring: 8, count: 2 },
-  { x: 130, y: 170, ring: 7, count: 4 },
+  { x: 140, y: 160, ring: 9, count: 5 },
+  { x: 160, y: 140, ring: 8, count: 3 },
+  { x: 130, y: 170, ring: 7, count: 2 },
   { x: 170, y: 130, ring: 6, count: 1 },
-  { x: 120, y: 180, ring: 5, count: 2 },
-  { x: 180, y: 120, ring: 8, count: 3 },
-  { x: 110, y: 190, ring: 4, count: 1 },
+  { x: 120, y: 180, ring: 5, count: 5 },
+  { x: 180, y: 120, ring: 8, count: 4 },
+  { x: 110, y: 190, ring: 4, count: 3 },
   { x: 190, y: 110, ring: 9, count: 2 },
-  { x: 145, y: 145, ring: 10, count: 3 },
-  { x: 155, y: 155, ring: 9, count: 1 },
-  { x: 125, y: 165, ring: 6, count: 2 },
+  { x: 145, y: 145, ring: 10, count: 1 },
+  { x: 155, y: 155, ring: 9, count: 5 },
+  { x: 125, y: 165, ring: 6, count: 4 },
+  { x: 175, y: 135, ring: 8, count: 3 },
+  { x: 135, y: 175, ring: 7, count: 2 },
+  { x: 165, y: 125, ring: 8, count: 1 },
 ]);
 
 // 绘制热力图
-const drawHeatMap = () => {
+const drawHeatMap = (width, height) => {
   try {
     const ctx = uni.createCanvasContext("heatMapCanvas");
-    const canvasWidth = 300;
-    const canvasHeight = 300;
+
+    // ctx.setFillStyle("rgba(255, 255, 255, 0.4)");
+    // ctx.fillRect(0, 0, width, height);
 
     // 绘制热力点
     heatMapData.value.forEach((point) => {
-      const radius = point.count * 8 + 15;
+      // 数量越多，半径越小（反比关系）
+      const radius = Math.max(8, 30 - point.count * 4);
 
-      // 根据频次设置颜色
+      // 根据频次设置同一种颜色的5个深浅度
       let color;
-      if (point.count >= 4) {
-        color = "rgba(255, 0, 0, 0.7)"; // 红色 - 高频
+      if (point.count >= 5) {
+        color = "rgba(255, 232, 143, 0.7)"; // 最深 - 频次5次及以上
+      } else if (point.count >= 4) {
+        color = "rgba(255, 232, 143, 0.5)"; // 较深 - 频次4次
+      } else if (point.count >= 3) {
+        color = "rgba(255, 232, 143, 0.3)"; // 中等 - 频次3次
       } else if (point.count >= 2) {
-        color = "rgba(255, 255, 0, 0.6)"; // 黄色 - 中频
+        color = "rgba(255, 232, 143, 0.2)"; // 较浅 - 频次2次
       } else {
-        color = "rgba(0, 255, 0, 0.5)"; // 绿色 - 低频
+        color = "rgba(255, 232, 143, 0.1)"; // 最浅 - 频次1次
       }
 
       // 绘制圆形热力点
@@ -83,14 +95,13 @@ const drawHeatMap = () => {
       ctx.fill();
 
       // 绘制环数标签
-      ctx.setFillStyle("#fff");
-      ctx.setFontSize(14);
-      ctx.setTextAlign("center");
-      ctx.fillText(point.ring.toString(), point.x, point.y + 5);
+      // ctx.setFillStyle("#fff");
+      // ctx.setFontSize(14);
+      // ctx.setTextAlign("center");
+      // ctx.fillText(point.ring.toString(), point.x, point.y + 5);
     });
 
     ctx.draw();
-    console.log("热力图绘制完成");
   } catch (error) {
     console.error("绘制热力图失败:", error);
   }
@@ -98,13 +109,13 @@ const drawHeatMap = () => {
 
 onShow(async () => {
   const result = await getPointBookListAPI(1);
-  list.value = result;
+  list.value = result.slice(0, 3);
   const result2 = await getPointBookStatisticsAPI();
   data.value = result2;
-
+  const rect = await getElementRect(".heat-map");
   // 延迟绘制热力图确保Canvas准备就绪
   setTimeout(() => {
-    drawHeatMap();
+    drawHeatMap(rect.width, rect.height);
   }, 500);
 });
 
@@ -249,7 +260,7 @@ onShareTimeline(() => {
           <text>平均环数（箭）</text>
         </view>
         <view>
-          <text>{{ data.yellowRate * 100 }}</text>
+          <text>{{ Number(data.yellowRate * 100).toFixed(2) }}</text>
           <text>黄心率（%）</text>
         </view>
         <view>
@@ -393,9 +404,11 @@ onShareTimeline(() => {
   width: calc(100vw - 70rpx);
   height: calc(100vw - 70rpx);
 }
+
 .heat-map > image {
   width: 100%;
 }
+
 .heat-map > canvas {
   position: absolute;
   top: 0;