158 lines
4.3 KiB
HTML
158 lines
4.3 KiB
HTML
{{ define "main" }}
|
|
<div id="pjax-container">
|
|
<h2>热力图</h2>
|
|
<div id="heatmap" style="
|
|
max-width: 600px;
|
|
height: 180px;
|
|
padding: 2px;
|
|
text-align: center;"
|
|
></div>
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/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;
|
|
|
|
// echart heatmap data seems to only support two elements tuple
|
|
// it doesn't render when each item has 3 value
|
|
// it also only pass first 2 elements when reading event param
|
|
// so here we build a map to store additional metadata like link and title
|
|
// map format {date: [wordcount, link, title]}
|
|
// for more information see https://blog.douchi.space/hugo-blog-heatmap
|
|
var dataMap = new Map();
|
|
{{ range ((where .Site.RegularPages "Type" "post")) }}
|
|
var key = {{ .Date.Format "2006-01-02" }};
|
|
var value = dataMap.get(key);
|
|
var wordCount = {{ div .WordCount 1000.0 | lang.FormatNumber 1 }};
|
|
var link = {{ .RelPermalink}};
|
|
var title = {{ .Title }};
|
|
|
|
// multiple posts in same day, chose the longer one
|
|
// can also store all posts and use sum as value, but seems like an overkill
|
|
if (value == null || wordCount > value[0]) {
|
|
dataMap.set(key, {wordCount, link, title});
|
|
}
|
|
{{- end -}}
|
|
|
|
var data = [];
|
|
for (const [key, value] of dataMap.entries()) {
|
|
data.push([key, value.wordCount]);
|
|
}
|
|
|
|
var startDate = new Date();
|
|
var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
|
|
var startDate = +new Date(year_Mill);
|
|
var endDate = +new Date();
|
|
|
|
var dayTime = 3600 * 24 * 1000;
|
|
startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
|
|
endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
|
|
|
|
// change date range according to months we want to render
|
|
function heatmap_width(months){
|
|
var startDate = new Date();
|
|
var mill = startDate.setMonth((startDate.getMonth() - months));
|
|
var endDate = +new Date();
|
|
startDate = +new Date(mill);
|
|
|
|
endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
|
|
startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
|
|
|
|
var showmonth = [];
|
|
showmonth.push([
|
|
startDate,
|
|
endDate
|
|
]);
|
|
return showmonth
|
|
};
|
|
|
|
function getRangeArr() {
|
|
const windowWidth = window.innerWidth;
|
|
if (windowWidth >= 600) {
|
|
return heatmap_width(12);
|
|
} else if (windowWidth >= 400) {
|
|
return heatmap_width(9);
|
|
} else {
|
|
return heatmap_width(6);
|
|
}
|
|
}
|
|
|
|
option = {
|
|
title: {
|
|
top: 0,
|
|
left: 'center',
|
|
text: ''
|
|
},
|
|
tooltip: {
|
|
formatter: function (p) {
|
|
const post = dataMap.get(p.data[0]);
|
|
return post.title + ' | ' + post.wordCount + ' 千字';
|
|
}
|
|
},
|
|
visualMap: {
|
|
min: 0,
|
|
max: 10,
|
|
type: 'piecewise',
|
|
orient: 'horizontal',
|
|
left: 'center',
|
|
top: 30,
|
|
|
|
inRange: {
|
|
// [floor color, ceiling color]
|
|
color: ['#7aa8744c', '#7AA874' ]
|
|
},
|
|
splitNumber: 4,
|
|
text: ['千字', ''],
|
|
showLabel: true,
|
|
itemGap: 20,
|
|
},
|
|
calendar: {
|
|
top: 80,
|
|
left: 20,
|
|
right: 4,
|
|
cellSize: ['auto', 12],
|
|
range: getRangeArr(),
|
|
itemStyle: {
|
|
color: '#F1F1F1',
|
|
borderWidth: 2.5,
|
|
borderColor: '#fff',
|
|
},
|
|
yearLabel: { show: false },
|
|
// the splitline between months. set to transparent for now.
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(0, 0, 0, 0.0)',
|
|
// shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
// shadowBlur: 5,
|
|
// width: 0.5,
|
|
// type: 'dashed',
|
|
}
|
|
}
|
|
},
|
|
series: {
|
|
type: 'heatmap',
|
|
coordinateSystem: 'calendar',
|
|
data: data,
|
|
}
|
|
};
|
|
myChart.setOption(option);
|
|
myChart.on('click', function(params) {
|
|
if (params.componentType === 'series') {
|
|
const post = dataMap.get(params.data[0]);
|
|
const link = window.location.origin + post.link;
|
|
window.open(link, '_blank').focus();
|
|
}
|
|
});
|
|
</script>
|
|
<div class="post-content" itemprop="articleBody">
|
|
{{ .Content }}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{{ end }} |