缘起
看到少数派上介绍 HabitKit，发现它的呈现方式有点像 github 代码提交的热力图，挺好看。
加上之前也浏览过椒盐豆豉的文章 如何给 Hugo 博客添加热力图，想着能不能在自己的博客上也用类似的形式来记录一下平常的运动、学习，也是一种激励。
实现
了解到可以用 echart 的 js 后，和 ChatGPT 4 展开了数轮的对话，历经众多问题，终于得到了我想到的样子。
主要代码如下：
<script type="text/javascript">
function createHeatmap(containerId, dataUrl) {
var chartDom = document.getElementById(containerId);
var myChart = echarts.init(chartDom);
var option = {
tooltip: {
position: 'top',
formatter: function (params) {
return params.value[0] + ' - ' + params.value[2];
}
},
calendar: {
top: 'middle',
left: 'center',
orient: 'horizontal',
cellSize: [15, 15],
range: '2024',
itemStyle: {
borderWidth: 1,
borderColor: '#ccc'
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
data: []
}]
};
myChart.setOption(option);
fetch(dataUrl)
.then(response => response.text())
.then(text => {
const data = text.split('\n').map(line => {
const parts = line.split('|');
if (parts.length === 3) {
return [parts[0].trim(), 1, parts[2].trim()]; // 使用 1 作为占位数值
}
return null;
}).filter(item => item !== null);
myChart.setOption({
series: [{
data: data
}]
});
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
}
createHeatmap('heatmap1', 'https://utils.jinhuaiyao.com/exercise.txt');
createHeatmap('heatmap2', 'https://utils.jinhuaiyao.com/running.txt');
createHeatmap('heatmap3', 'https://utils.jinhuaiyao.com/reading.txt');
createHeatmap('heatmap4', 'https://utils.jinhuaiyao.com/vocabulary.txt');
createHeatmap('heatmap5', 'https://utils.jinhuaiyao.com/englishpod.txt');
</script>
数据源
数据源要以特定的格式写到文本文件里，写了一个简单的 cron job，每天晚上 12 点把 Logseq 里当天的的运动、学习记录抓取出来放到 VPS 上。
cd /Users/jinhuaiyao/.tmp/
DT=`date +%Y_%m_%d`
for file in `ls *.txt`
do
cp $file /Users/jinhuaiyao/OneDrive/Backup/backup_heatmap/${file}.${DT}
done
cd /Users/jinhuaiyao/Dropbox/my_logseq/journals
grep '\[\[今日运动\]\]' 2024* |sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[今日运动\]\]/1/g' > /Users/jinhuaiyao/.tmp/exercise.txt
grep '\[\[跑步\]\]' 2024* |grep -v '\- km' |sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[跑步\]\]/1/g' > /Users/jinhuaiyao/.tmp/running.txt
grep '\[\[今日阅读\]\]' 2024* |grep -v '\- km' |sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[今日阅读\]\]/1/g' > /Users/jinhuaiyao/.tmp/reading.txt
grep '\[\[英语学习\]\]' 2024* |grep 背单词 |sed 's/EnglishPod//g' |sed 's/，//g'|sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[英语学习\]\]/1/g' |sed 's/背单词//g' > /Users/jinhuaiyao/.tmp/vocabulary.txt
grep '\[\[英语学习\]\]' 2024* |grep EnglishPod|sed 's/背单词//g' |sed 's/，//g'|sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[英语学习\]\]/1/g' > /Users/jinhuaiyao/.tmp/englishpod.txt
cd /Users/jinhuaiyao/.tmp/
scp -P xx *.txt [email protected]:/home/xx/www/webpage
jinhuaiyao@huaiyaos-mac-mini .tmp % ls -ltr
total 40
-rw-r--r-- 1 jinhuaiyao staff 1221 May 10 23:59 exercise.txt
-rw-r--r-- 1 jinhuaiyao staff 184 May 10 23:59 running.txt
-rw-r--r-- 1 jinhuaiyao staff 3479 May 10 23:59 reading.txt
-rw-r--r-- 1 jinhuaiyao staff 938 May 10 23:59 vocabulary.txt
-rw-r--r-- 1 jinhuaiyao staff 957 May 10 23:59 englishpod.txt
jinhuaiyao@huaiyaos-mac-mini .tmp % tail -5 englishpod.txt
2024-04-27| 1 | EnglishPod
2024-04-28| 1 | EnglishPod 15
2024-05-07| 1 | EnglishPod 16
2024-05-08| 1 | EnglishPod 17
2024-05-09| 1 | EnglishPod 17