在Hexo博客中使用easy-charts来画图

发表于 | 分类于 ， | 评论数： | 阅读次数：
本文字数： 0 | 阅读时长 ≈ 1 分钟

使用ECharts来画图

hexo-tag-easy-charts

The easy to use chart tags for the hexo, the idea came from my favorite markdown editor - MarkEditor.

Installation

1
2
npm install hexo-inject --save
npm install hexo-tag-easy-charts --save

Barchart

Horizontal Headings

1
2
3
4
{% barchart 'Barchart with Horizontal Headings' %}
Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
97 | 72 | 89 | 93 | 68 | 75
{% endbarchart %}

Vertical Headings

1
2
3
4
5
6
7
8
9
{% barchart 'Barchart with Vertical Headings' %}
Fruit | Sales
Durian | 56
Clementine | 85
Durian | 73
Mulberry | 93
Papaya | 68
Rambutan | 53
{% endbarchart %}

Two Dimensional

1
2
3
4
5
6
7
8
{% barchart 'Barchart with Two Dimensional' %}
Quarter | Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
Q1 | 80 | 73 | 72 | 62 | 83 | 65
Q2 | 56 | 60 | 50 | 58 | 57 | 63
Early Q3(Q3) | 61 | 72 | 85 | 76 | 69 | 88
Late Q3(Q3) | 83 | 91 | 98 | 82 | 62 | 86
Q4 | 54 | 58 | 67 | 64 | 50 | 93
{% endbarchart %}

Note: Early Q3(Q3) and Late Q3(Q3) will automatically combined.

Linechart

Horizontal Headings

1
2
3
4
{% linechart 'Linechart with Horizontal Headings' %}
Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
97 | 72 | 89 | 93 | 68 | 75
{% endlinechart %}

Vertical Headings

1
2
3
4
5
6
7
8
9
{% linechart 'Linechart with Vertical Headings' %}
Fruit | Sales
Durian | 56
Clementine | 85
Durian | 73
Mulberry | 93
Papaya | 68
Rambutan | 53
{% endlinechart %}

Two Dimensional

1
2
3
4
5
6
7
8
{% linechart 'Linechart with Two Dimensional' %}
Quarter | Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
Q1 | 80 | 73 | 72 | 62 | 83 | 65
Q2 | 56 | 60 | 50 | 58 | 57 | 63
Early Q3(Q3) | 61 | 72 | 85 | 76 | 69 | 88
Late Q3(Q3) | 83 | 91 | 98 | 82 | 62 | 86
Q4 | 54 | 58 | 67 | 64 | 50 | 93
{% endlinechart %}

Note: Early Q3(Q3) and Late Q3(Q3) will automatically combined.

Piechart

Horizontal Headings

1
2
3
4
{% piechart 'Piechart with Horizontal Headings' %}
Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
97 | 72 | 89 | 93 | 68 | 75
{% endpiechart %}

Vertical Headings

1
2
3
4
5
6
7
8
9
{% piechart 'Piechart with Vertical Headings' %}
Fruit | Sales
Durian | 56
Clementine | 85
Durian | 73
Mulberry | 93
Papaya | 68
Rambutan | 53
{% endpiechart %}

Options

  • width
  • height
  • legend

Example

1
2
{% piechart 'title' width:300px height:400px legend:false %}
{% endpiechart %}

参考

hexo-tag-easy-charts

墨问非名 wechat
订阅我的公众号
听说，你想请我喝杯咖啡？☕️
0%