144 lines
4.2 KiB
HTML
144 lines
4.2 KiB
HTML
<div id="heatmap" class="uk-visible@m" style="max-width: 700px;height: 110px;margin-bottom: 40px;"></div>
|
|
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
|
|
<script type="text/javascript">
|
|
var chartDom = document.getElementById('heatmap');
|
|
var myChart = echarts.init(chartDom);
|
|
window.onresize = function() {
|
|
myChart.resize();
|
|
};
|
|
var option;
|
|
var dataMap = new Map();
|
|
{{ range ((where .Site.RegularPages "Type" "post")) }}
|
|
var key = {{ .Date.Format "2006-01-02" }};
|
|
var value = dataMap.get(key);
|
|
var link = {{ .RelPermalink}};
|
|
var title = {{ .Title }};
|
|
|
|
// multiple posts in same day
|
|
if (value == null) {
|
|
dataMap.set(key, [{link, title}]);
|
|
} else {
|
|
value.push({link, title});
|
|
}
|
|
{{- end -}}
|
|
|
|
var data = [];
|
|
for (const [key, value] of dataMap.entries()) {
|
|
data.push([key, value.length]);
|
|
}
|
|
|
|
var startDate = new Date()
|
|
var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
|
|
var startDate = +new Date(year_Mill);
|
|
var endDate = +new Date()
|
|
|
|
startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
|
|
endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
|
|
|
|
// 检测浏览器主题模式并选择颜色方案
|
|
var prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
// 定义明亮模式下的颜色方案
|
|
var lightTheme = {
|
|
backgroundColor: '#FFFFFF',
|
|
fangkuaicolor:'#F4F4F4',
|
|
gaoliangcolor: ['#333'],
|
|
riqiColor: '#999',
|
|
textbrcolor: '#FFF',
|
|
xiankuangcolor:'rgba(0, 0, 0, 0.0)',
|
|
};
|
|
|
|
// 定义暗黑模式下的颜色方案
|
|
var darkTheme = {
|
|
backgroundColor: '#FFFFFF',
|
|
fangkuaicolor:'#F4F4F4',
|
|
gaoliangcolor: ['#333'],
|
|
riqiColor: '#999',
|
|
textbrcolor: '#FFF',
|
|
xiankuangcolor:'rgba(0, 0, 0, 0.0)',
|
|
};
|
|
|
|
// 备份暗黑模式
|
|
// backgroundColor: '#1A1718',
|
|
// fangkuaicolor:'#282325',
|
|
// gaoliangcolor: ['#b25f2f'],
|
|
// riqiColor: '#666',
|
|
// textbrcolor: '#332D2F',
|
|
|
|
// 根据浏览器主题模式选择当前主题
|
|
var currentTheme = prefersDarkMode ? darkTheme : lightTheme;
|
|
|
|
option = {
|
|
tooltip: {
|
|
hideDelay: 1000,
|
|
enterable: true,
|
|
backgroundColor: currentTheme.textbrcolor,
|
|
borderWidth: 0, // 边框宽度为0
|
|
formatter: function (p) {
|
|
const date = p.data[0];
|
|
const posts = dataMap.get(date);
|
|
var content = `<span style="font-size: 0.75rem;font-family: var(--font-family-code);">${date}</span>`;
|
|
for (const [i, post] of posts.entries()) {
|
|
content += "<br>";
|
|
var link = post.link;
|
|
var title = post.title;
|
|
content += `<a href="${link}" target="_blank">${title}</a>` + '<br>';
|
|
}
|
|
return content;
|
|
}
|
|
},
|
|
visualMap: {
|
|
show: false,
|
|
inRange: {
|
|
color: currentTheme.gaoliangcolor
|
|
},
|
|
},
|
|
calendar: {
|
|
left: 20,
|
|
top:20,
|
|
bottom:0,
|
|
right: 0,
|
|
cellSize: ['auto', 13],
|
|
range: [startDate, endDate],
|
|
itemStyle: {
|
|
color: currentTheme.fangkuaicolor,
|
|
borderWidth: 3.5,
|
|
borderColor: currentTheme.backgroundColor,
|
|
},
|
|
yearLabel: { show: false },
|
|
monthLabel: {
|
|
nameMap: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
|
|
textStyle: {
|
|
color: currentTheme.riqiColor,
|
|
}
|
|
},
|
|
dayLabel: {
|
|
firstDay: 1,
|
|
nameMap: ['日', '一', '', '三', '', '五', ''],
|
|
textStyle: {
|
|
color: currentTheme.riqiColor
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: currentTheme.xiankuangcolor,
|
|
}
|
|
}
|
|
},
|
|
series: {
|
|
type: 'heatmap',
|
|
coordinateSystem: 'calendar',
|
|
data: data,
|
|
}
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
myChart.on('click', function(params) {
|
|
if (params.componentType === 'series') {
|
|
// open the first post on the day
|
|
const post = dataMap.get(params.data[0])[0];
|
|
const link = window.location.origin + post.link;
|
|
window.open(link, '_blank').focus();
|
|
}
|
|
});
|
|
</script> |