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> |
<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> |
</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> |
</script> |
||||
|
|
||||
<style></style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue