使用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 %}

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

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

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

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

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

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

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

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