61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<template>
|
|
<calendar-heatmap
|
|
v-if="!isMobile()"
|
|
:values="heatmapData"
|
|
:end-date="new Date()"
|
|
no-data-text="暂无记录"
|
|
tooltip-unit="篇"
|
|
:round="2"
|
|
:locale="{
|
|
less: '少于',
|
|
more: '多于',
|
|
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
|
days: ['日', '一', '二', '三', '四', '五', '六'],
|
|
}"
|
|
class="blog-heatmap"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { CalendarHeatmap } from 'vue3-calendar-heatmap';
|
|
import 'vue3-calendar-heatmap/dist/style.css';
|
|
import { data } from '../../data/posts.data.js'
|
|
import {isMobile} from "../utils";
|
|
|
|
const dateCountMap = new Map<string, number>();
|
|
|
|
// 按日期分组统计
|
|
data.forEach(item => {
|
|
const date = item.date
|
|
|
|
if (dateCountMap.has(date)) {
|
|
dateCountMap.set(date, dateCountMap.get(date)! + 1);
|
|
} else {
|
|
dateCountMap.set(date, 1);
|
|
}
|
|
});
|
|
|
|
// 转换为目标格式
|
|
const heatmapData = Array.from(dateCountMap.entries()).map(([date, count]) => ({
|
|
date,
|
|
count
|
|
}))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.blog-heatmap {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.blog-heatmap :deep(.vch__wrapper) {
|
|
font-family: 'CustomFont', sans-serif !important;
|
|
}
|
|
|
|
.blog-heatmap :deep(.vch__month__label) {
|
|
font-size: 8px !important;
|
|
}
|
|
|
|
.blog-heatmap :deep(.vch__day__label) {
|
|
font-size: 8px !important;
|
|
}
|
|
</style> |