cullmann/cullmann.io
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
cullmann.io/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md

415 lines
8.3 KiB
Markdown
Raw Normal View History

switch back to LoveIt, other theme is deprectated
2022-08-14 19:01:21 +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."
images: []
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’s it.
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`.
Reference in a new issue Copy permalink