blog_front/src/components/blogs/rightsite/HeatMap.vue

<template>
    <a-card hoverable>
        <template #cover>
            <div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);">
                <div ref="heat" style="height: 100%;"></div>
            </div>
        </template>
    </a-card>
</template>

<script setup lang='ts'>
import { get } from '@/tools/request';
import { ref, reactive, onMounted } from 'vue';
import { createEcharts } from "@/hooks/intex"
const heat = ref(null);
function generateDates(numDays: number) {
    const dates = [];
    const currentDate = new Date();
    for (let i = 0; i < numDays; i++) {
        const date = new Date(currentDate);
        date.setDate(currentDate.getDate() - i);
        dates.push(
            { date: date.toISOString().split('T')[0], writCount: 0 }
        ); // 包含日期和评论数
    }
    return dates;
}
// 初始化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]
        });
        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 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: {
                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)', 'rgba(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
            }
        },
        series: [{
            type: 'heatmap',
            data: [],
            itemStyle: {
                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 // 鼠标悬停时的边框宽度
                }
            }
        }]
    }
)
onMounted(() => {
    statisticList()
    createEcharts(heat, heatMapData);
})
</script>

<style></style>