|
|
<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>
|