代码优化

src/pages/point-book.vue

@@ -76,29 +76,56 @@ const loadData = async () => {
   else if (result2.checkInCount >= 5) hot = 3;
   else if (result2.checkInCount === 7) hot = 4;
   uni.$emit("update-hot", hot);
-  setTimeout(async () => {
+  // 异步生成热力图，不阻塞UI
+  const generateHeatmapAsync = async () => {
+    const weekArrows = result2.weekArrows
+      .filter((item) => item.x && item.y)
+      .map((item) => [item.x, item.y]);
+
     try {
-      const imagePath = await generateKDEHeatmapImage(
+      // 渐进式渲染：数据量大时先快速渲染粗略版本
+      if (weekArrows.length > 1000) {
+        const quickPath = await generateKDEHeatmapImage(
+          "heatMapCanvas",
+          rect.width,
+          rect.height,
+          weekArrows,
+          {
+            range: [0, 1],
+            gridSize: 80, // 先使用较小的gridSize快速显示
+            bandwidth: 0.2,
+            showPoints: false,
+          }
+        );
+        heatMapImageSrc.value = quickPath;
+        // 延迟后再渲染精细版本
+        await new Promise((resolve) => setTimeout(resolve, 500));
+      }
+
+      // 渲染最终精细版本
+      const finalPath = await generateKDEHeatmapImage(
         "heatMapCanvas",
         rect.width,
         rect.height,
-        result2.weekArrows
-          .filter((item) => item.x && item.y)
-          .map((item) => [item.x, item.y]),
+        weekArrows,
         {
-          range: [0, 1], // 适配0-1坐标范围
+          range: [0, 1],
           gridSize: 120, // 更高的网格密度，减少锯齿
           bandwidth: 0.15, // 稍小的带宽，让热力图更细腻
-          showPoints: false, // 显示白色原始数据点
+          showPoints: false,
         }
       );
-      heatMapImageSrc.value = imagePath; // 存储生成的图片地址
+      heatMapImageSrc.value = finalPath;
       loadImage.value = false;
-      console.log("热力图图片地址:", imagePath);
+      console.log("热力图图片地址:", finalPath);
     } catch (error) {
       console.error("生成热力图图片失败:", error);
+      loadImage.value = false;
     }
-  }, 300);
+  };
+
+  // 异步生成热力图，不阻塞UI
+  generateHeatmapAsync();
 };
 
 watch(
@@ -224,19 +251,19 @@ onShareTimeline(() => {
       <view class="statistics">
         <view>
           <text>{{ data.todayTotalArrow || "-" }}</text>
-          <text>今日射箭（箭）</text>
+          <text>今日射箭(箭)</text>
         </view>
         <view>
           <text>{{ data.totalArrow || "-" }}</text>
-          <text>累计射箭（箭）</text>
+          <text>累计射箭(箭)</text>
         </view>
         <view>
           <text>{{ data.totalDay || "-" }}</text>
-          <text>已训练天数（天）</text>
+          <text>已训练天数(天)</text>
         </view>
         <view>
           <text>{{ data.averageRing || "-" }}</text>
-          <text>平均环数（箭）</text>
+          <text>平均环数(箭)</text>
         </view>
         <view>
           <text>{{
@@ -244,7 +271,7 @@ onShareTimeline(() => {
               ? Number(data.yellowRate * 100).toFixed(2)
               : "-"
           }}</text>
-          <text>黄心率（%）</text>
+          <text>黄心率(%)</text>
         </view>
         <view>
           <button hover-class="none" @click="startScoring">
@@ -276,7 +303,7 @@ onShareTimeline(() => {
           "
         />
       </view>
-      <view class="reward" v-if="data.totalArrow && !loadImage">
+      <view class="reward" v-if="data.totalArrow">
         <button hover-class="none" @click="showTip = true">
           <image src="../static/reward-us.png" mode="widthFix" />
         </button>