WordPress教程：如何给博客添加heatmap热力图

受椒盐豆豉：如何给 Hugo 博客添加热力图 这篇文章的启发，椒盐豆豉做的是hugo版本，我博客使用的是 WordPress，本想自己开发一个，奈何懒+工作忙就搁置了。

一次晚上逛推，看到了雪糕做的 WordPress 版本：WP Post Heatmap 给 WordPress 博客添加热力图，看着效果不错，第二天，趁着有点时间就给自己的博客整上了。

雪糕做的是插件版本，我只想给我的统计页面直接使用，不想安装插件。

我就看了看雪糕的源码，将主要的部分复制到了我的统计页面代码中。

复制完，我发现页面方格显示的是全部的年份的日期，有点不太直观，我就想能不能直接通过切换年份来展示这一整年的方格（这一灵感借鉴于 Github 个人主页提交代码热力图）。

几天不看椒盐豆豉的热力图文章，再去看，发现 Liminal Negative Space 给热力图添加了多文章显示。

今天正好周六就把教程写一下，方便爱折腾的小伙伴使用。（期间家里还断网了，真是遭老罪了。我去修网了🐶）

年份切换功能实现

奈何我代码能力不是很强，只能求助ChatGPT帮我写了一个页面年份切换的 select 选择框

<div id="year-selector-container">
<label for="year-selector">选择年份:</label>
<select id="year-selector">
  <!-- 添加从2020年到当前年份的选项 -->
  <?php
    $currentYear = date("Y");
      for ($year = 2024; $year >= 2020; $year--) {
      echo "<option value='$year'>$year</option>";
     }
  ?>
</select>
</div>

既然选择框都有了，那不得加上切换年份变换整个年份日期的功能

document.getElementById('year-selector').addEventListener('change', function() {  // 获取用户选择的年份
    var selectedYear = document.getElementById('year-selector').value;
    heatmapOption.calendar.range = wholeYearRange(selectedYear);
    heatmapChart.setOption(heatmapOption);
});

function wholeYearRange(selectedYear) {
    const wholeYearStart = new Date(selectedYear, 0, 1); // 一年的开始日期
    const wholeYearEnd = new Date(selectedYear, 11, 31); // 一年的结束日期

    const startDateFormatted = echarts.format.formatTime('yyyy-MM-dd', wholeYearStart);
    const endDateFormatted = echarts.format.formatTime('yyyy-MM-dd', wholeYearEnd);
    // console.log([startDateFormatted, endDateFormatted])
    return [startDateFormatted, endDateFormatted];
}

到这基本上年份切换功能就完成了。

下面就贴一下全部代码，快快用起来吧。

全部代码

1. 写在页面显示的位置，例如标签之间

<div id="year-selector-container">
<label for="year-selector">选择年份:</label>
<select id="year-selector">
  <!-- 添加从2020年到当前年份的选项 -->
  <?php
    $currentYear = date("Y");
      for ($year = 2024; $year >= 2020; $year--) {
      echo "<option value='$year'>$year</option>";
     }
  ?>
</select>
</div>
<div id="heatmap-chart" style="width: 100%; height:180px;"></div>

2. 引入 echats cdn链接

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>

3. 具体功能实现代码，请看这里，这里面可是来自4个人的精华😋

<script>
  var heatmapChart = echarts.init(document.getElementById('heatmap-chart'));
<? php
//获取全部文章发布时间、字数、标题、链接
$args = array('numberposts' => -1, // Fetch all posts
);
$posts = get_posts($args);
$post_data = array();

foreach($posts as $post) {
    $date = get_the_date('Y-m-d', $post);
    $word_count = mb_strlen(strip_tags(strip_shortcodes($post - > post_content)), 'UTF8');
    $title = get_the_title($post);
    $url = get_permalink($post - > ID);
    $post_data[] = array('date' => $date, 'word_count' => $word_count, 'title' => $title, 'url' => $url);
} ?>

let option;
const dataMap = new Map();
  // 使用postData来接收php中获取的全部文章发布时间、字数、标题、链接
var postData = <?=json_encode($post_data); ? >;
postData.forEach(function(post) {
    const key = post.date; // Date of the post
    const value = dataMap.get(key);
    const wordCount = post.word_count;
    const link = post.url; // URL of the post
    const title = post.title; // Title of the post
    // In the case of multiple articles on the same day, prefer the one with more words.
    // if (value == null || wordCount > value.wordCount) {
    //     console.log(dataMap)
    //     dataMap.set(key, {key, wordCount, link, title});
    // }
    if (value == null) {
        dataMap.set(key, [{
            wordCount,
            link,
            title
        }]);
    } else {
        value.push({
            key,
            wordCount,
            link,
            title
        });
    }
});

const data = [];
for (const[key, value] of dataMap.entries()) {
    // data.push([key, value.wordCount]);
    var sum = 0;
    for (const v of value) {
        sum += v.wordCount;
    }
    data.push([key, (sum / 1000).toFixed(1)]);
}

document.getElementById('year-selector').addEventListener('change',
function() { // 获取用户选择的年份
    var selectedYear = document.getElementById('year-selector').value;
    heatmapOption.calendar.range = wholeYearRange(selectedYear);
    heatmapChart.setOption(heatmapOption);
});

function wholeYearRange(selectedYear) {
    const wholeYearStart = new Date(selectedYear, 0, 1); // 一年的开始日期
    const wholeYearEnd = new Date(selectedYear, 11, 31); // 一年的结束日期
    const startDateFormatted = echarts.format.formatTime('yyyy-MM-dd', wholeYearStart);
    const endDateFormatted = echarts.format.formatTime('yyyy-MM-dd', wholeYearEnd);
    // console.log([startDateFormatted, endDateFormatted])
    return [startDateFormatted, endDateFormatted];
}

heatmapOption = {
    title: {
        top: 0,
        left: 'center',
        text: '博客废话产量'
    },
    tooltip: {
        formatter: function(p) {
            // const post = dataMap.get(p.data[0]);
            // // console.log(post);
            // return post.title + ' | ' + post.wordCount + ' 千字' + ' | ' + post.key;
            const date = p.data[0];
            const posts = dataMap.get(date);
            var content = `$ {
                date
            }`;
            for (const[i, post] of posts.entries()) {
                content += "<br>";
                var link = post.link;
                var title = post.title;
                // var date = post.key;
                var wordCount = (post.wordCount / 1000).toFixed(1);
                content += `• < a href = "${link}"target = "_blank" > $ {
                    title
                } | $ {
                    wordCount
                }千字 < /a>`
            }
            return content;
        }
    },
    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: wholeYearRange(2024),
            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,
        }
    };

    heatmapChart.setOption(heatmapOption);

    heatmapChart.on('click',
    function(params) {
        if (params.componentType === 'series') {
            const post = dataMap.get(params.data[0])[0];
            window.open(post.link, '_blank').focus();
        }
    });
 </script>