Browse Docs

Shortcode

HugoMods Authors March 14, 2024 9 min read Docs Markdown Shortcode TOML YAML JSON JavaScript

Using ECharts with shortcode.

On this page
Donate

Syntax

TOML/YAML/JSON Syntax

1{{< echarts param1=value1 param2=value2 >}}
2CHART OPTIONS WRITTEN IN JSON/TOML/YAML
3{{< /echarts >}}

TOML/YAML/JSON Data File Syntax

1{{< echarts data="" param1=value1 param2=value2 />}}

JavaScript Syntax

1{{< echarts _js=true param1=value1 param2=value2 >}}
2CHART OPTIONS WRITTEN IN JSON/TOML/YAML
3{{< /echarts >}}

JavaScript File Syntax

1{{< echarts _js=true _jsFile="" param1=value1 param2=value2 />}}

Parameters

data

PositionNameTypeRequiredDefaultSince
-datastring---

The name (without extension) of data file that relative to data folder or page’s folder.

_js

PositionNameTypeRequiredDefaultSince
-_jsboolean-false-

Indicates whehter if the chart is written in JavaScript, when true, you must return the chart options.

_jsFile

PositionNameTypeRequiredDefaultSince
-_jsFilestring---

The path of JavaScript file that relative to assets folder or page’s folder.

height

PositionNameTypeRequiredDefaultSince
-heightnumber-400-

The height of chart container.

weight

PositionNameTypeRequiredDefaultSince
-weightnumber-100%-

The width of chart container.

Others

You’re able to set any attributes for the chart containers, such as class, id and data-*.

Examples

JSON Example

Source
 1{{< echarts >}}
 2{
 3  "xAxis": {
 4    "type": "category",
 5    "data": [
 6      "Mon",
 7      "Tue",
 8      "Wed",
 9      "Thu",
10      "Fri",
11      "Sat",
12      "Sun"
13    ]
14  },
15  "yAxis": {
16    "type": "value"
17  },
18  "series": [
19    {
20      "data": [
21        150,
22        230,
23        224,
24        218,
25        135,
26        147,
27        260
28      ],
29      "type": "line"
30    }
31  ]
32}
33{{< /echarts >}}
34```
Result

JSON Page Data File Example

 1{
 2  "tooltip": {
 3    "formatter": "{a} <br/>{b} : {c}%"
 4  },
 5  "series": [
 6    {
 7      "name": "Pressure",
 8      "type": "gauge",
 9      "detail": {
10        "formatter": "{value}"
11      },
12      "data": [
13        {
14          "value": 50,
15          "name": "SCORE"
16        }
17      ]
18    }
19  ]
20}
Source
1{{< echarts data="charts.gauge" />}}
Result

JSON Site Data File Example

 1return {
 2  title: {
 3    text: 'Referer of a Website',
 4    subtext: 'Fake Data',
 5    left: 'center'
 6  },
 7  tooltip: {
 8    trigger: 'item'
 9  },
10  legend: {
11    orient: 'vertical',
12    left: 'left'
13  },
14  series: [
15    {
16      name: 'Access From',
17      type: 'pie',
18      radius: '50%',
19      data: [
20        { value: 1048, name: 'Search Engine' },
21        { value: 735, name: 'Direct' },
22        { value: 580, name: 'Email' },
23        { value: 484, name: 'Union Ads' },
24        { value: 300, name: 'Video Ads' }
25      ],
26      emphasis: {
27        itemStyle: {
28          shadowBlur: 10,
29          shadowOffsetX: 0,
30          shadowColor: 'rgba(0, 0, 0, 0.5)'
31        }
32      }
33    }
34  ]
35};
Source
1{{< echarts data="charts.line" />}}
Result

JSON Example With Custom Attributes

Source
 1{{< echarts height=480 id=echarts-bar class="echarts-bar" data-type="bar" >}}
 2{
 3  "xAxis": {
 4    "type": "category",
 5    "data": [
 6      "Mon",
 7      "Tue",
 8      "Wed",
 9      "Thu",
10      "Fri",
11      "Sat",
12      "Sun"
13    ]
14  },
15  "yAxis": {
16    "type": "value"
17  },
18  "series": [
19    {
20      "data": [
21        120,
22        200,
23        150,
24        80,
25        70,
26        110,
27        130
28      ],
29      "type": "bar"
30    }
31  ]
32}
33{{< /echarts >}}
Result

TOML Example

Source
 1{{< echarts >}}
 2[xAxis]
 3type = "category"
 4boundaryGap = false
 5data = [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ]
 6
 7[yAxis]
 8type = "value"
 9
10[[series]]
11data = [ 820, 932, 901, 934, 1_290, 1_330, 1_320 ]
12type = "line"
13areaStyle = { }
14{{< /echarts >}}
Result

YAML Example

Source
  1{{< echarts >}}
  2title:
  3  text: Stacked Area Chart
  4tooltip:
  5  trigger: axis
  6  axisPointer:
  7    type: cross
  8    label:
  9      backgroundColor: "#6a7985"
 10legend:
 11  data:
 12  - Email
 13  - Union Ads
 14  - Video Ads
 15  - Direct
 16  - Search Engine
 17toolbox:
 18  feature:
 19    saveAsImage: {}
 20grid:
 21  left: 3%
 22  right: 4%
 23  bottom: 3%
 24  containLabel: true
 25xAxis:
 26- type: category
 27  boundaryGap: false
 28  data:
 29  - Mon
 30  - Tue
 31  - Wed
 32  - Thu
 33  - Fri
 34  - Sat
 35  - Sun
 36yAxis:
 37- type: value
 38series:
 39- name: Email
 40  type: line
 41  stack: Total
 42  areaStyle: {}
 43  emphasis:
 44    focus: series
 45  data:
 46  - 120
 47  - 132
 48  - 101
 49  - 134
 50  - 90
 51  - 230
 52  - 210
 53- name: Union Ads
 54  type: line
 55  stack: Total
 56  areaStyle: {}
 57  emphasis:
 58    focus: series
 59  data:
 60  - 220
 61  - 182
 62  - 191
 63  - 234
 64  - 290
 65  - 330
 66  - 310
 67- name: Video Ads
 68  type: line
 69  stack: Total
 70  areaStyle: {}
 71  emphasis:
 72    focus: series
 73  data:
 74  - 150
 75  - 232
 76  - 201
 77  - 154
 78  - 190
 79  - 330
 80  - 410
 81- name: Direct
 82  type: line
 83  stack: Total
 84  areaStyle: {}
 85  emphasis:
 86    focus: series
 87  data:
 88  - 320
 89  - 332
 90  - 301
 91  - 334
 92  - 390
 93  - 330
 94  - 320
 95- name: Search Engine
 96  type: line
 97  stack: Total
 98  label:
 99    show: true
100    position: top
101  areaStyle: {}
102  emphasis:
103    focus: series
104  data:
105  - 820
106  - 932
107  - 901
108  - 934
109  - 1290
110  - 1330
111  - 1320
112{{< /echarts >}}
Result

JavaScript Example

Source
  1{{< echarts _js=true id="echarts-js-example" >}}
  2var option = {
  3  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  4  title: {
  5    text: 'Gradient Stacked Area Chart'
  6  },
  7  tooltip: {
  8    trigger: 'axis',
  9    axisPointer: {
 10      type: 'cross',
 11      label: {
 12        backgroundColor: '#6a7985'
 13      }
 14    }
 15  },
 16  legend: {
 17    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
 18  },
 19  toolbox: {
 20    feature: {
 21      saveAsImage: {}
 22    }
 23  },
 24  grid: {
 25    left: '3%',
 26    right: '4%',
 27    bottom: '3%',
 28    containLabel: true
 29  },
 30  xAxis: [
 31    {
 32      type: 'category',
 33      boundaryGap: false,
 34      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 35    }
 36  ],
 37  yAxis: [
 38    {
 39      type: 'value'
 40    }
 41  ],
 42  series: [
 43    {
 44      name: 'Line 1',
 45      type: 'line',
 46      stack: 'Total',
 47      smooth: true,
 48      lineStyle: {
 49        width: 0
 50      },
 51      showSymbol: false,
 52      areaStyle: {
 53        opacity: 0.8,
 54        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 55          {
 56            offset: 0,
 57            color: 'rgb(128, 255, 165)'
 58          },
 59          {
 60            offset: 1,
 61            color: 'rgb(1, 191, 236)'
 62          }
 63        ])
 64      },
 65      emphasis: {
 66        focus: 'series'
 67      },
 68      data: [140, 232, 101, 264, 90, 340, 250]
 69    },
 70    {
 71      name: 'Line 2',
 72      type: 'line',
 73      stack: 'Total',
 74      smooth: true,
 75      lineStyle: {
 76        width: 0
 77      },
 78      showSymbol: false,
 79      areaStyle: {
 80        opacity: 0.8,
 81        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 82          {
 83            offset: 0,
 84            color: 'rgb(0, 221, 255)'
 85          },
 86          {
 87            offset: 1,
 88            color: 'rgb(77, 119, 255)'
 89          }
 90        ])
 91      },
 92      emphasis: {
 93        focus: 'series'
 94      },
 95      data: [120, 282, 111, 234, 220, 340, 310]
 96    },
 97    {
 98      name: 'Line 3',
 99      type: 'line',
100      stack: 'Total',
101      smooth: true,
102      lineStyle: {
103        width: 0
104      },
105      showSymbol: false,
106      areaStyle: {
107        opacity: 0.8,
108        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
109          {
110            offset: 0,
111            color: 'rgb(55, 162, 255)'
112          },
113          {
114            offset: 1,
115            color: 'rgb(116, 21, 219)'
116          }
117        ])
118      },
119      emphasis: {
120        focus: 'series'
121      },
122      data: [320, 132, 201, 334, 190, 130, 220]
123    },
124    {
125      name: 'Line 4',
126      type: 'line',
127      stack: 'Total',
128      smooth: true,
129      lineStyle: {
130        width: 0
131      },
132      showSymbol: false,
133      areaStyle: {
134        opacity: 0.8,
135        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
136          {
137            offset: 0,
138            color: 'rgb(255, 0, 135)'
139          },
140          {
141            offset: 1,
142            color: 'rgb(135, 0, 157)'
143          }
144        ])
145      },
146      emphasis: {
147        focus: 'series'
148      },
149      data: [220, 402, 231, 134, 190, 230, 120]
150    },
151    {
152      name: 'Line 5',
153      type: 'line',
154      stack: 'Total',
155      smooth: true,
156      lineStyle: {
157        width: 0
158      },
159      showSymbol: false,
160      label: {
161        show: true,
162        position: 'top'
163      },
164      areaStyle: {
165        opacity: 0.8,
166        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
167          {
168            offset: 0,
169            color: 'rgb(255, 191, 0)'
170          },
171          {
172            offset: 1,
173            color: 'rgb(224, 62, 76)'
174          }
175        ])
176      },
177      emphasis: {
178        focus: 'series'
179      },
180      data: [220, 302, 181, 234, 210, 290, 150]
181    }
182  ]
183}
184return option;
185{{< /echarts >}}
Result

Page JavaScript File Example

 1let base = +new Date(1968, 9, 3);
 2let oneDay = 24 * 3600 * 1000;
 3let date = [];
 4let data = [Math.random() * 300];
 5for (let i = 1; i < 20000; i++) {
 6  var now = new Date((base += oneDay));
 7  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
 8  data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
 9}
10return {
11  tooltip: {
12    trigger: 'axis',
13    position: function (pt) {
14      return [pt[0], '10%'];
15    }
16  },
17  title: {
18    left: 'center',
19    text: 'Large Area Chart'
20  },
21  toolbox: {
22    feature: {
23      dataZoom: {
24        yAxisIndex: 'none'
25      },
26      restore: {},
27      saveAsImage: {}
28    }
29  },
30  xAxis: {
31    type: 'category',
32    boundaryGap: false,
33    data: date
34  },
35  yAxis: {
36    type: 'value',
37    boundaryGap: [0, '100%']
38  },
39  dataZoom: [
40    {
41      type: 'inside',
42      start: 0,
43      end: 10
44    },
45    {
46      start: 0,
47      end: 10
48    }
49  ],
50  series: [
51    {
52      name: 'Fake Data',
53      type: 'line',
54      symbol: 'none',
55      sampling: 'lttb',
56      itemStyle: {
57        color: 'rgb(255, 70, 131)'
58      },
59      areaStyle: {
60        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
61          {
62            offset: 0,
63            color: 'rgb(255, 158, 68)'
64          },
65          {
66            offset: 1,
67            color: 'rgb(255, 70, 131)'
68          }
69        ])
70      },
71      data: data
72    }
73  ]
74};
Source
1{{< echarts _js=true _jsFile="charts/large-scale-area.js" id="echarts-js-page-file-example" />}}
Result

Site JavaScript File Example

 1return {
 2  title: {
 3    text: 'Referer of a Website',
 4    subtext: 'Fake Data',
 5    left: 'center'
 6  },
 7  tooltip: {
 8    trigger: 'item'
 9  },
10  legend: {
11    orient: 'vertical',
12    left: 'left'
13  },
14  series: [
15    {
16      name: 'Access From',
17      type: 'pie',
18      radius: '50%',
19      data: [
20        { value: 1048, name: 'Search Engine' },
21        { value: 735, name: 'Direct' },
22        { value: 580, name: 'Email' },
23        { value: 484, name: 'Union Ads' },
24        { value: 300, name: 'Video Ads' }
25      ],
26      emphasis: {
27        itemStyle: {
28          shadowBlur: 10,
29          shadowOffsetX: 0,
30          shadowColor: 'rgba(0, 0, 0, 0.5)'
31        }
32      }
33    }
34  ]
35};
Source
1{{< echarts _js=true _jsFile="charts/pie-website-referer.js" id="echarts-js-site-file-example" />}}
Result
Code Block
Styling