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,18 +445,37 @@ 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 = {
+const heatMapData = reactive(
+    {
         tooltip: {
             position: 'top',
             formatter: function (params: any) {
@@ -500,15 +518,16 @@ const heatMapData = {
             bottom: '15%',
             show: false,
             inRange: {
-            color: ['rgba(182,181,178,0.01)', 'rgb(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
+                color: ['rgba(182,181,178,0.01)', 'rgba(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
             }
         },
         series: [{
             type: 'heatmap',
-        data: formattedData,
+            data: [],
             itemStyle: {
                 borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色
                 borderWidth: 0.5, // 设置边框宽度
+                
             },
             label: {
                 show: false,
@@ -522,19 +541,8 @@ const heatMapData = {
                 }
             }
         }]
-};
-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;
-            }
-        });
-    })
-
     }
+)
 // 音乐组件
 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);
 };