修改热力图渲染方式

src/pages/point-book.vue

@@ -17,7 +17,8 @@ import {
 } from "@/apis";
 
 import { getElementRect } from "@/util";
-import { generateHeatmapImage } from "@/heatmap";
+
+import { generateKDEHeatmapImage } from "@/kde-heatmap";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -61,75 +62,39 @@ const startScoring = () => {
   }
 };
 
-// 生成热力图测试数据
-const generateHeatMapData = (width, height, amount = 100) => {
-  const data = [];
-  const centerX = 0.5; // 中心点X坐标
-  const centerY = 0.5; // 中心点Y坐标
-
-  // 生成500条记录
-  for (let i = 0; i < amount; i++) {
-    let x, y, count;
-
-    // 30%的数据集中在中心区域（高斯分布）
-    if (Math.random() < 0.3) {
-      // 使用正态分布生成中心区域的数据
-      const angle = Math.random() * 2 * Math.PI;
-      const radius = Math.sqrt(-2 * Math.log(Math.random())) * 0.15; // 标准差0.15
-      x = centerX + radius * Math.cos(angle);
-      y = centerY + radius * Math.sin(angle);
-      count = Math.floor(Math.random() * 20);
-    } else {
-      x = Math.random() * 0.8 + 0.1; // 0.1-0.9范围
-      y = Math.random() * 0.8 + 0.1;
-      count = Math.floor(Math.random() * 20);
-    }
-
-    // 确保坐标在0-1范围内
-    x = Math.max(0.05, Math.min(0.95, x));
-    y = Math.max(0.05, Math.min(0.95, y));
-
-    data.push({
-      x: parseFloat(x.toFixed(3)),
-      y: parseFloat(y.toFixed(3)),
-      ring: Math.floor(Math.random() * 5) + 6, // 6-10环
-      count: count,
-    });
-  }
-
-  return data;
-};
-
 const loadData = async () => {
   const result = await getPointBookListAPI(1);
   list.value = result.slice(0, 3);
   const result2 = await getPointBookStatisticsAPI();
+  data.value = result2;
 
   const rect = await getElementRect(".heat-map");
-  // const testWeekArrows = generateHeatMapData(rect.width, rect.height);
-  // result2.weekArrows = testWeekArrows;
-  // console.log(result2.weekArrows)
-  data.value = result2;
   let hot = 0;
   if (result2.checkInCount > -3 && result2.checkInCount < 3) hot = 1;
   else if (result2.checkInCount >= 3) hot = 2;
   else if (result2.checkInCount >= 5) hot = 3;
   else if (result2.checkInCount === 7) hot = 4;
   uni.$emit("update-hot", hot);
-  setTimeout(async () => {
-    try {
-      const imagePath = await generateHeatmapImage(
-        "heatMapCanvas",
-        rect.width,
-        rect.height,
-        result2.weekArrows.filter((item) => item.x && item.y)
-      );
-      heatMapImageSrc.value = imagePath; // 存储生成的图片地址
-      console.log("热力图图片地址:", imagePath);
-    } catch (error) {
-      console.error("生成热力图图片失败:", error);
-    }
-  }, 500);
+  try {
+    const imagePath = await generateKDEHeatmapImage(
+      "heatMapCanvas",
+      rect.width,
+      rect.height,
+      result2.weekArrows
+        .filter((item) => item.x && item.y)
+        .map((item) => [item.x, item.y]),
+      {
+        range: [0, 1], // 适配0-1坐标范围
+        gridSize: 150, // 更高的网格密度，减少锯齿
+        bandwidth: 0.15, // 稍小的带宽，让热力图更细腻
+        showPoints: true, // 显示白色原始数据点
+      }
+    );
+    heatMapImageSrc.value = imagePath; // 存储生成的图片地址
+    console.log("热力图图片地址:", imagePath);
+  } catch (error) {
+    console.error("生成热力图图片失败:", error);
+  }
 };
 
 watch(