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.
 
 
 
 

110 lines
3.3 KiB

<div class="container archive-calendar">
<div class="card">
<div id="post-calendar" class="card-content"></div>
</div>
</div>
<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.echarts) %>"></script>
<script type="text/javascript">
let myChart = echarts.init(document.getElementById('post-calendar'));
<%
var nameMap = (config.language && config.language.indexOf('zh') >= 0) ? 'cn' : 'en';
var titleText = (config.language && config.language.indexOf('zh') >= 0) ? '文章日历' : 'Post Calendar';
// calculate range.
var startDate = moment().subtract(1, 'years');
var endDate = moment();
var rangeArr = '["' + startDate.format('YYYY-MM-DD') + '", "' + endDate.format('YYYY-MM-DD') + '"]';
// post and count map.
var dateMap = new Map();
site.posts.forEach(function (post) {
var date = post.date.format('YYYY-MM-DD');
var count = dateMap.get(date);
dateMap.set(date, count == null || count == undefined ? 1 : count + 1);
});
// loop the data for the current year, generating the number of post per day
var i = 0;
var datePosts = '[';
var dayTime = 3600 * 24 * 1000;
for (var time = startDate; time <= endDate; time += dayTime) {
var date = moment(time).format('YYYY-MM-DD');
datePosts = (i === 0 ? datePosts + '["' : datePosts + ', ["') + date + '", '
+ (dateMap.has(date) ? dateMap.get(date) : 0) + ']';
i++;
}
datePosts += ']';
%>
let option = {
title: {
top: 0,
text: '<%- titleText %>',
left: 'center',
textStyle: {
color: '#3C4858'
}
},
tooltip: {
padding: 10,
backgroundColor: '#555',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj.value;
return '<div style="font-size: 14px;">' + value[0] + ':' + value[1] + '</div>';
}
},
visualMap: {
show: true,
showLabel: true,
categories: [0, 1, 2, 3, 4],
calculable: true,
inRange: {
symbol: 'rect',
color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
},
itemWidth: 12,
itemHeight: 12,
orient: 'horizontal',
left: 'center',
bottom: 0
},
calendar: [{
left: 'center',
range: <%- rangeArr %>,
cellSize: [13, 13],
splitLine: {
show: false
},
itemStyle: {
color: '#196127',
borderColor: '#fff',
borderWidth: 2
},
yearLabel: {
show: false
},
monthLabel: {
nameMap: '<%- nameMap %>',
fontSize: 11
},
dayLabel: {
formatter: '{start} 1st',
nameMap: '<%- nameMap %>',
fontSize: 11
}
}],
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 0,
data: <%- datePosts %>
}]
};
myChart.setOption(option);
</script>