博客统计图表📊

原帖

使用Charts插件给Butterfly增加统计图表

效果预览

本站统计图表

https://zhongye1.github.io/site/echarts/

特性

将 hexo poats、类别和标签的统计数据呈现到图表中。

灵感来自 HEXO 主题 matery.

包含

发布统计图，发布日历图，标签统计图，分类统计图，分类雷达图，支持图表名称自定义配置

支持标签/分类统计图横坐标间隔数自定义配置

更新记录

hexo-butterfly-charts更新日志

2023-05-19 [1.1.4 -> 1.1.45]

插件默认 echarts_CDN 修改为：https://lib.baomitu.com/echarts/4.7.0/echarts.min.js

新增配置项：

hexo-butterfly-charts更新日志

2023-05-19 [1.1.4 -> 1.1.45]

插件默认 echarts_CDN 修改为：https://lib.baomitu.com/echarts/4.7.0/echarts.min.js

新增配置项：

1	echarts_CDN

解决原来使用的固定 CDN 资源失效问题。使用方法：

YML

# 统计图表，支持发布文章统计、发布日历、Top标签统计、分类统计、分类雷达。
# see https://www.npmjs.com/package/hexo-butterfly-charts
charts:
  enable: true # 是否启用功能
  postsChart:
    title: 文章发布统计 # 设置文章发布统计的标题，默认为空
    interval: 1 # 横坐标间隔
  tagsChart:
    title: Top 10 标签统计 # 设置标签统计的标题，默认为空
    interval: 1 # 横坐标间隔
  postsCalendar_title: 文章发布日历 # 设置发布日历的标题，默认为空
  categoriesChart_title: # 设置分类统计的标题，默认为空
  categoriesRadar_title: # 设置分类雷达的标题，默认为空
+ echarts_CDN: # https://lib.baomitu.com/echarts/4.7.0/echarts.min.js

解决原来使用的固定 CDN 资源失效问题。使用方法：

2023-01-22 [1.1.1 -> 1.1.4]
调整分类统计图中，“# 文章分类”为 “文章篇数”
更新 moment 到 2.29.4

2021-07-26 1.1.0 -> 1.1.1

调整README.md，增加Demo页面

2021-07-24 1.1.0

增加柱状图表横纵坐标轴名称
适配Butterfly暗色模式，自动切换
文章发布日历，坐标也换成中文
各图表标题支持配置
解决雷达图上，鼠标hover时，超出内容被画布吞掉的问题
解决分类雷达图未设置画布高度，导致无法显示的bug

用法

将发布日历添加到归档页面

安装插件后，在/Butterfly/layout/archive.pug文件中，#archive下面添加一行#posts-calendar.js-pjax, 新添加的比上一行多缩进两个空格。

修改后如下：

PLAINTEXT
extends includes/layout.pug

block content
  include ./includes/mixins/article-sort.pug
  #archive
    #posts-calendar.js-pjax
    .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
    +articleSort(page.posts)
    include includes/pagination.pug

其他页面，只需`md`文件中插入这个标签：

1	<div id="posts-calendar" class="js-pjax"></div>

将发布统计添加到归档页面

安装插件后，在/Butterfly/layout/archive.pug文件中，#archive下面添加一行#posts-chart.js-pjax, 新添加的比上一行多缩进两个空格。

修改后如下：

PLAINTEXT
extends includes/layout.pug

block content
  include ./includes/mixins/article-sort.pug
  #archive
    #posts-chart.js-pjax
    .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
    +articleSort(page.posts)
    include includes/pagination.pug

其他页面，只需`md`文件中插入这个标签：

1	<div id="posts-chart" class="js-pjax"></div>

将标签统计插入到标签页面

编辑主题目录/Butterfly/layout/includes/page/tags.pug文件，在开头添加一行#tags-chart(data-length = "10").js-pjax，data-length = "10"表示显示 Top 10 的标签。

修改后如下：

PLAINTEXT
#tags-chart(data-length = "10").js-pjax
.tag-cloud-title.is-center= _p('page.tag')
  |  - 
  span.tag-cloud-amount= site.tags.length
.tag-cloud-list.is-center
  !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})

其他页面，只需`md`文件中插入这个标签：

1 2	<!-- "data-length" = how many tags to show, default 10 --> <div id="tags-chart" data-length="10" class="js-pjax"></div>

将分类统计（无标题）和分类雷达图（无标题）添加到分类页面

编辑主题目录/Butterfly/layout/includes/page/categories.pug文件，在第5行添加#categories-chart.js-pjax和#categories-radar.js-pjax。

修改后如下：

PLAINTEXT
.category-lists
  .category-title.is-center= _p('page.category')
    |  - 
    span.category-amount= site.categories.length
  #categories-chart.js-pjax
  #categories-radar.js-pjax
  div!= list_categories()