Echarts实现github提交记录图

news2025/1/8 6:00:54

最近改个人博客，看了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>