Echarts实现github提交记录图

最近改个人博客，看了github的提交记录，是真觉得好看。可以移植到自己的博客上做文章统计

效果如下

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en" style="height: 100%"><head><meta charset="utf-8">
</head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script><script type="text/javascript">var dom = document.getElementById('container');var myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false});var app = {};var option;function getVirtualData(year) {const date = +echarts.time.parse(year + '-01-01');const end = +echarts.time.parse(+year + 1 + '-01-01');const dayTime = 3600 * 24 * 1000;const data = [];for (let time = date; time < end; time += dayTime) {data.push([echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),Math.floor(Math.random() * 50)]);}return data;}option = {title: {top: 30,left: 'center',text: 'Daily Step Count'},tooltip: {},visualMap: {min: 1,max: 10,splitNumber: '3',type: 'piecewise',orient: 'horizontal',left: 'center',show: false,top: 65,inRange: {color: ['#9be9a8', '#40c463', '#30a14e', '#216e39']},},calendar: {top: 120,left: 30,right: 30,cellSize: ['auto', 13],range: '2024',itemStyle: {borderWidth: 0.5},yearLabel: { show: false }},series: {type: 'heatmap',coordinateSystem: 'calendar',data: getVirtualData('2024')}};if (option && typeof option === 'object') {myChart.setOption(option);}window.addEventListener('resize', myChart.resize);</script>
</body></html>