diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue index 3818bba..fb8dbbe 100644 --- a/src/components/blogs/HomePage.vue +++ b/src/components/blogs/HomePage.vue @@ -429,7 +429,6 @@ const statistics = reactive([ ]) // 日历热力图 const heat = ref(null); -const newData = []; function generateDates(numDays: number) { const dates = []; @@ -446,95 +445,104 @@ function generateDates(numDays: number) { // 初始化60天的数据 const data = generateDates(60); // 重新排列数据 +const rawData = ref([]); +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 = []; for (let i = 0; i < 60; i += 15) { // 取出每个15天的数据,并反转顺序 const chunk = data.slice(i, i + 15).reverse(); newData.push(...chunk); } -const rawData = ref([]); -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}
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}
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) => { diff --git a/src/hooks/intex.ts b/src/hooks/intex.ts index 09bb0d2..1fc478a 100644 --- a/src/hooks/intex.ts +++ b/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); };