panda
9 months ago
6 changed files with 205 additions and 163 deletions
-
8package-lock.json
-
3package.json
-
BINsrc/assets/images/ceshi.png
-
12src/assets/index.ts
-
161src/components/blogs/HomePage.vue
-
120src/components/blogs/ceshi.vue
|
After Width: 2560 | Height: 1440 | Size: 2.3 MiB |
@ -1,109 +1,27 @@ |
|||
<template> |
|||
<div class="echarts-2"> |
|||
<div ref="heat" style="height: 200px;width: 500px;"></div> |
|||
</div> |
|||
<div ref="wordcloud" style="width: 500px; height: 500px;"></div> |
|||
</template> |
|||
|
|||
<script setup lang='ts'> |
|||
import { onMounted, ref } from "vue"; |
|||
import { createEcharts } from "@/hooks/intex" |
|||
<script setup> |
|||
import { ref, onMounted } from 'vue'; |
|||
import wordcloud from 'wordcloud'; |
|||
|
|||
const heat = ref(null); |
|||
const wordcloudRef = ref(null); |
|||
|
|||
onMounted(() => { |
|||
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], blogCount: 0 } |
|||
); // 包含日期和评论数 |
|||
} |
|||
|
|||
return dates.reverse(); |
|||
} |
|||
|
|||
// 初始化60天的数据 |
|||
const data = generateDates(60); |
|||
console.log(data) |
|||
data[3].blogCount = 5; |
|||
data[15].blogCount = 10; |
|||
data[25].blogCount = 3; |
|||
|
|||
const formattedData = data.map((value, index) => [index % 15, Math.floor(index / 15), value.blogCount]); |
|||
const tags = [ |
|||
{ text: 'Java', weight: 5 }, |
|||
{ text: 'Python', weight: 3 }, |
|||
{ text: 'JavaScript', weight: 7 }, |
|||
{ text: 'Ant Design', weight: 2 }, |
|||
{ text: 'Vue.js', weight: 4 }, |
|||
{ text: 'React', weight: 6 }, |
|||
{ text: 'Angular', weight: 3 }, |
|||
{ text: 'CSS', weight: 4 }, |
|||
{ text: 'HTML', weight: 5 } |
|||
]; |
|||
|
|||
const heatMapData = { |
|||
tooltip: { |
|||
position: 'top', |
|||
formatter: function (params) { |
|||
const item = data[params.dataIndex]; |
|||
if (item.blogCount > 0) { |
|||
return `${item.date}<br/>COMMENTS: ${item.blogCount}`; |
|||
} 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: 10, |
|||
calculable: true, |
|||
orient: 'horizontal', |
|||
left: 'center', |
|||
bottom: '15%', |
|||
show: false, |
|||
inRange: { |
|||
color: ['#ffffff', '#000000'] // 0评论是白色, 非0评论是黑色 |
|||
} |
|||
}, |
|||
|
|||
series: [{ |
|||
type: 'heatmap', |
|||
data: formattedData, |
|||
itemStyle: { |
|||
borderColor: '#000', // 设置边框颜色 |
|||
borderWidth: 1 // 设置边框宽度 |
|||
}, |
|||
label: { |
|||
show: false, |
|||
}, |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)', |
|||
borderColor: '#fff', // 鼠标悬停时的边框颜色 |
|||
borderWidth: 2 // 鼠标悬停时的边框宽度 |
|||
} |
|||
} |
|||
}] |
|||
}; |
|||
createEcharts(heat, heatMapData) |
|||
onMounted(() => { |
|||
const canvas = wordcloudRef.value; |
|||
wordcloud(canvas, { list: tags }); |
|||
}); |
|||
</script> |
|||
|
|||
<style></style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue