2022-05-08 19:31:17 +02:00
---
weight: 6
title: "Theme Documentation - echarts Shortcode"
date: 2020-03-03T14:29:41+08:00
lastmod: 2020-03-03T14:29:41+08:00
draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "The echarts shortcode supports data visualization in Hugo with ECharts library."
2022-05-12 21:41:37 +02:00
images: []
2022-05-08 19:31:17 +02:00
resources:
- name: "featured-image"
src: "featured-image.jpg"
tags: ["shortcodes"]
categories: ["documentation"]
hiddenFromHomePage: true
toc:
enable: false
code:
maxShownLines: 70
---
The `echarts` shortcode supports data visualization in Hugo with [ECharts ](https://echarts.apache.org/ ) library.
<!-- more -->
**ECharts** is a library helping you to generate interactive data visualization.
The basic chart types ECharts supports include [line series ](https://echarts.apache.org/en/option.html#series-line ), [bar series ](https://echarts.apache.org/en/option.html#series-line ), [scatter series ](https://echarts.apache.org/en/option.html#series-scatter ), [pie charts ](https://echarts.apache.org/en/option.html#series-pie ), [candle-stick series ](https://echarts.apache.org/en/option.html#series-candlestick ), [boxplot series ](https://echarts.apache.org/en/option.html#series-boxplot ) for statistics, [map series ](https://echarts.apache.org/en/option.html#series-map ), [heatmap series ](https://echarts.apache.org/en/option.html#series-heatmap ), [lines series ](https://echarts.apache.org/en/option.html#series-lines ) for directional information, [graph series ](https://echarts.apache.org/en/option.html#series-graph ) for relationships, [treemap series ](https://echarts.apache.org/en/option.html#series-treemap ), [sunburst series ](https://echarts.apache.org/en/option.html#series-sunburst ), [parallel series ](https://echarts.apache.org/en/option.html#series-parallel ) for multi-dimensional data, [funnel series ](https://echarts.apache.org/en/option.html#series-funnel ), [gauge series ](https://echarts.apache.org/en/option.html#series-gauge ). And it's extremely easy to create a combinition of them with ECharts.
Just insert your ECharts option in `JSON` /`YAML`/`TOML` format in the `echarts` shortcode and that’
Example `echarts` input in `JSON` format:
```json
{{< /* echarts */>}}
{
"title": {
"text": "Summary Line Chart",
"top": "2%",
"left": "center"
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
"top": "10%"
},
"grid": {
"left": "5%",
"right": "5%",
"bottom": "5%",
"top": "20%",
"containLabel": true
},
"toolbox": {
"feature": {
"saveAsImage": {
"title": "Save as Image"
}
}
},
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"name": "Email Marketing",
"type": "line",
"stack": "Total",
"data": [120, 132, 101, 134, 90, 230, 210]
},
{
"name": "Affiliate Advertising",
"type": "line",
"stack": "Total",
"data": [220, 182, 191, 234, 290, 330, 310]
},
{
"name": "Video Advertising",
"type": "line",
"stack": "Total",
"data": [150, 232, 201, 154, 190, 330, 410]
},
{
"name": "Direct View",
"type": "line",
"stack": "Total",
"data": [320, 332, 301, 334, 390, 330, 320]
},
{
"name": "Search Engine",
"type": "line",
"stack": "Total",
"data": [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
{{< /* /echarts */>}}
```
The same in `YAML` format:
```yaml
{{< /* echarts */>}}
title:
text: Summary Line Chart
top: 2%
left: center
tooltip:
trigger: axis
legend:
data:
- Email Marketing
- Affiliate Advertising
- Video Advertising
- Direct View
- Search Engine
top: 10%
grid:
left: 5%
right: 5%
bottom: 5%
top: 20%
containLabel: true
toolbox:
feature:
saveAsImage:
title: Save as Image
xAxis:
type: category
boundaryGap: false
data:
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
- Sunday
yAxis:
type: value
series:
- name: Email Marketing
type: line
stack: Total
data:
- 120
- 132
- 101
- 134
- 90
- 230
- 210
- name: Affiliate Advertising
type: line
stack: Total
data:
- 220
- 182
- 191
- 234
- 290
- 330
- 310
- name: Video Advertising
type: line
stack: Total
data:
- 150
- 232
- 201
- 154
- 190
- 330
- 410
- name: Direct View
type: line
stack: Total
data:
- 320
- 332
- 301
- 334
- 390
- 330
- 320
- name: Search Engine
type: line
stack: Total
data:
- 820
- 932
- 901
- 934
- 1290
- 1330
- 1320
{{< /* /echarts */>}}
```
The same in `TOML` format:
```toml
{{< /* echarts */>}}
[title]
text = "Summary Line Chart"
top = "2%"
left = "center"
[tooltip]
trigger = "axis"
[legend]
data = [
"Email Marketing",
"Affiliate Advertising",
"Video Advertising",
"Direct View",
"Search Engine"
]
top = "10%"
[grid]
left = "5%"
right = "5%"
bottom = "5%"
top = "20%"
containLabel = true
[toolbox]
[toolbox.feature]
[toolbox.feature.saveAsImage]
title = "Save as Image"
[xAxis]
type = "category"
boundaryGap = false
data = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
]
[yAxis]
type = "value"
[[series]]
name = "Email Marketing"
type = "line"
stack = "Total"
data = [
120.0,
132.0,
101.0,
134.0,
90.0,
230.0,
210.0
]
[[series]]
name = "Affiliate Advertising"
type = "line"
stack = "Total"
data = [
220.0,
182.0,
191.0,
234.0,
290.0,
330.0,
310.0
]
[[series]]
name = "Video Advertising"
type = "line"
stack = "Total"
data = [
150.0,
232.0,
201.0,
154.0,
190.0,
330.0,
410.0
]
[[series]]
name = "Direct View"
type = "line"
stack = "Total"
data = [
320.0,
332.0,
301.0,
334.0,
390.0,
330.0,
320.0
]
[[series]]
name = "Search Engine"
type = "line"
stack = "Total"
data = [
820.0,
932.0,
901.0,
934.0,
1290.0,
1330.0,
1320.0
]
{{< /* /echarts */>}}
```
The rendered output looks like this:
{{< echarts > }}
{
"title": {
"text": "Summary Line Chart",
"top": "2%",
"left": "center"
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
"top": "10%"
},
"grid": {
"left": "5%",
"right": "5%",
"bottom": "5%",
"top": "20%",
"containLabel": true
},
"toolbox": {
"feature": {
"saveAsImage": {
"title": "Save as Image"
}
}
},
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"name": "Email Marketing",
"type": "line",
"stack": "Total",
"data": [120, 132, 101, 134, 90, 230, 210]
},
{
"name": "Affiliate Advertising",
"type": "line",
"stack": "Total",
"data": [220, 182, 191, 234, 290, 330, 310]
},
{
"name": "Video Advertising",
"type": "line",
"stack": "Total",
"data": [150, 232, 201, 154, 190, 330, 410]
},
{
"name": "Direct View",
"type": "line",
"stack": "Total",
"data": [320, 332, 301, 334, 390, 330, 320]
},
{
"name": "Search Engine",
"type": "line",
"stack": "Total",
"data": [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
{{< / echarts > }}
The `echarts` shortcode has also the following named parameters:
* **width** *[optional]* (**first** positional parameter)
{{< version 0 . 2 . 0 > }} Width of the data visualization, default value is `100%` .
* **height** *[optional]* (**second** positional parameter)
{{< version 0 . 2 . 0 > }} Height of the data visualization, default value is `30rem` .
