add new

src/components/blogs/HomePage.vue

@@ -429,7 +429,6 @@ const statistics = reactive([
 ])
 // 日历热力图
 const heat = ref(null);
-const newData = <any>[];
 
 function generateDates(numDays: number) {
     const dates = [];
@@ -446,95 +445,104 @@ function generateDates(numDays: number) {
 // 初始化60天的数据
 const data = generateDates(60);
 // 重新排列数据
+const rawData = ref<any[]>([]);
+const statisticList = async () => {
+    await get("/statistics/list").then(response => {
+        rawData.value = response.data.data
+        rawData.value.forEach(newDataItem => {
+            const item = newData.find((d: any) => d.date === newDataItem.date);
+            if (item) {
+                item.writCount = newDataItem.writCount;
+            }
+        });
+        let formattedData = newData.map((item: any, index: number) => {
+            return [index % 15, Math.floor(index / 15), item.writCount]
+        });
+        console.log(formattedData, "form");
+        formattedList(formattedData)
+        createEcharts(heat, heatMapData);
+    })
+}
+const formattedList = (val: any) => {
+    heatMapData.series[0].data = val
+}
+const newData = <any>[];
 for (let i = 0; i < 60; i += 15) {
     // 取出每个15天的数据，并反转顺序
     const chunk = data.slice(i, i + 15).reverse();
     newData.push(...chunk);
 }
 
-const rawData = ref<any[]>([]);
-const formattedData = newData.map((item: any, index: number) => {
-    return [index % 15, Math.floor(index / 15), item.writCount]
-});
 
-const heatMapData = {
-    tooltip: {
-        position: 'top',
-        formatter: function (params: any) {
-            const item = newData[params.dataIndex];
-            if (item.writCount > 0) {
-                return `${item.date}<br/>COMMENTS: ${item.writCount}`;
-            } else {
-                return `${item.date}`;
+const heatMapData = reactive(
+    {
+        tooltip: {
+            position: 'top',
+            formatter: function (params: any) {
+                const item = newData[params.dataIndex];
+                if (item.writCount > 0) {
+                    return `${item.date}<br/>COMMENTS: ${item.writCount}`;
+                } else {
+                    return `${item.date}`;
+                }
             }
-        }
-    },
-    grid: {
-        left: '0',     // 左边距
-        right: '0',    // 右边距
-        top: '0',      // 上边距
-        bottom: '0',
-    },
-    xAxis: {
-        type: 'category',
-        data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`),
-        splitArea: {
-            show: true
         },
-        show: false
-    },
-    yAxis: {
-        type: 'category',
-        data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'],
-        splitArea: {
+        grid: {
+            left: '0',     // 左边距
+            right: '0',    // 右边距
+            top: '0',      // 上边距
+            bottom: '0',
+        },
+        xAxis: {
+            type: 'category',
+            data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`),
+            splitArea: {
+                show: true
+            },
             show: false
         },
-        show: false
-    },
-    visualMap: {
-        min: 0,
-        max: 20,
-        calculable: true,
-        orient: 'horizontal',
-        left: 'center',
-        bottom: '15%',
-        show: false,
-        inRange: {
-            color: ['rgba(182,181,178,0.01)', 'rgb(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
-        }
-    },
-    series: [{
-        type: 'heatmap',
-        data: formattedData,
-        itemStyle: {
-            borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色
-            borderWidth: 0.5, // 设置边框宽度
+        yAxis: {
+            type: 'category',
+            data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'],
+            splitArea: {
+                show: false
+            },
+            show: false
         },
-        label: {
+        visualMap: {
+            min: 0,
+            max: 20,
+            calculable: true,
+            orient: 'horizontal',
+            left: 'center',
+            bottom: '15%',
             show: false,
+            inRange: {
+                color: ['rgba(182,181,178,0.01)', 'rgba(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
+            }
         },
-        emphasis: {
+        series: [{
+            type: 'heatmap',
+            data: [],
             itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',
-                borderColor: '#fff', // 鼠标悬停时的边框颜色
-                borderWidth: 2 // 鼠标悬停时的边框宽度
-            }
-        }
-    }]
-};
-const statisticList = async () => {
-    await get("/statistics/list").then(response => {
-        rawData.value = response.data.data
-        rawData.value.forEach(newDataItem => {
-            const item = newData.find((d: any) => d.date === newDataItem.date);
-            if (item) {
-                item.writCount = newDataItem.writCount;
-            }
-        });
-    })
+                borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色
+                borderWidth: 0.5, // 设置边框宽度
                 
-}
+            },
+            label: {
+                show: false,
+            },
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)',
+                    borderColor: '#fff', // 鼠标悬停时的边框颜色
+                    borderWidth: 2 // 鼠标悬停时的边框宽度
+                }
+            }
+        }]
+    }
+)
 // 音乐组件
 const random = ref();
 
@@ -548,6 +556,7 @@ onMounted(() => {
     statisticList()
     updateCurrentDate();
     setInterval(updateCurrentDate, 24 * 60 * 60 * 1000);
+    createEcharts(heat, heatMapData);
     nextTick(() => {
         const authorElement = document.querySelector('.author');
         if (authorElement) {
@@ -609,11 +618,9 @@ onMounted(() => {
         }
     });
     scrollbar.value = document.querySelector('.simplebar-content-wrapper');
-
-    createEcharts(heat, heatMapData);
+})
 
 
-})
 watch(
     () => route.name,
     (newRouteName) => {

src/hooks/intex.ts

@@ -45,6 +45,10 @@ export const verifySelect = (message: selectMessage) => {
  * echarts配置
  */
 export const createEcharts = (chartRef: any, option: any) => {
+  console.log(option,1111111111);
+  setTimeout(() => {
+    console.log(option.series[0].data,22222222);
+  }, 1000);
   const myChart = echarts.init(chartRef.value);
   myChart.setOption(option);
 };