OpenSource/LoveIt
1
0
Fork 0
mirror of https://github.com/dillonzq/LoveIt.git synced 2024-11-15 03:16:30 +01:00
Code Issues Projects Releases Packages Wiki Activity
LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md
Dillon 3bd252787a
chore: fix docs images error
2022-05-13 03:41:37 +08:00

414 lines
8.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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 View git blame Copy permalink