You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.9 KiB
134 lines
3.9 KiB
<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>
|