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

使用ECharts来画图

hexo-tag-easy-charts

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

Installation

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

Barchart

Horizontal Headings

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

Vertical Headings

{% barchart 'Barchart with Vertical Headings' %}
Fruit | Sales
Durian | 56
Clementine | 85
Durian | 73
Mulberry | 93
Papaya | 68
Rambutan | 53
{% endbarchart %}

Two Dimensional

{% 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

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

Vertical Headings

{% linechart 'Linechart with Vertical Headings' %}
Fruit | Sales
Durian | 56
Clementine | 85
Durian | 73
Mulberry | 93
Papaya | 68
Rambutan | 53
{% endlinechart %}

Two Dimensional

{% 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

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

Vertical Headings

{% 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

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

参考

hexo-tag-easy-charts