summaryrefslogtreecommitdiff
path: root/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode
diff options
context:
space:
mode:
authorChristoph Cullmann <cullmann@kde.org>2022-08-14 19:01:21 +0200
committerChristoph Cullmann <cullmann@kde.org>2022-08-14 19:01:21 +0200
commit51fb029ca27d67d7cd67352cdede45e5b25868f7 (patch)
tree6d8e34b2abdc757310ffe11189e926d017417bae /themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode
parent260b6803e78609e16ad3d59792f1681d9df0f1e4 (diff)
switch back to LoveIt, other theme is deprectated
Diffstat (limited to 'themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode')
-rw-r--r--themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/featured-image.jpgbin0 -> 53696 bytes
-rw-r--r--themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md414
-rw-r--r--themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.zh-cn.md414
3 files changed, 828 insertions, 0 deletions
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg b/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg
new file mode 100644
index 0000000..5554bc1
--- /dev/null
+++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg
Binary files differ
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md
new file mode 100644
index 0000000..40d2851
--- /dev/null
+++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md
@@ -0,0 +1,414 @@
+---
+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`.
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.zh-cn.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.zh-cn.md
new file mode 100644
index 0000000..e6f5c30
--- /dev/null
+++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.zh-cn.md
@@ -0,0 +1,414 @@
+---
+weight: 6
+title: "主题文档 - echarts Shortcode"
+date: 2020-03-03T14:29:59+08:00
+lastmod: 2020-03-03T14:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "echarts shortcode 使用 ECharts 库提供数据可视化的功能."
+images: []
+resources:
+- name: "featured-image"
+ src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+ enable: false
+code:
+ maxShownLines: 70
+---
+
+`echarts` shortcode 使用 [ECharts](https://echarts.apache.org/) 库提供数据可视化的功能.
+
+<!--more-->
+
+**ECharts** 是一个帮助你生成交互式数据可视化的库.
+
+ECharts 提供了常规的 [折线图](https://echarts.apache.org/zh/option.html#series-line), [柱状图](https://echarts.apache.org/zh/option.html#series-line), [散点图](https://echarts.apache.org/zh/option.html#series-scatter), [饼图](https://echarts.apache.org/zh/option.html#series-pie), [K线图](https://echarts.apache.org/zh/option.html#series-candlestick), 用于统计的 [盒形图](https://echarts.apache.org/zh/option.html#series-boxplot), 用于地理数据可视化的 [地图](https://echarts.apache.org/zh/option.html#series-map), [热力图](https://echarts.apache.org/zh/option.html#series-heatmap), [线图](https://echarts.apache.org/zh/option.html#series-lines), 用于关系数据可视化的 [关系图](https://echarts.apache.org/zh/option.html#series-graph), [treemap](https://echarts.apache.org/zh/option.html#series-treemap), [旭日图](https://echarts.apache.org/zh/option.html#series-sunburst), 多维数据可视化的 [平行坐标](https://echarts.apache.org/zh/option.html#series-parallel), 还有用于 BI 的 [漏斗图](https://echarts.apache.org/zh/option.html#series-funnel), [仪表盘](https://echarts.apache.org/zh/option.html#series-gauge), 并且支持图与图之间的混搭.
+
+只需在 `echarts` shortcode 中以 `JSON`/`YAML`/`TOML`格式插入 ECharts 选项即可.
+
+一个 `JSON` 格式的 `echarts` 示例:
+
+```json
+{{</* echarts */>}}
+{
+ "title": {
+ "text": "折线统计图",
+ "top": "2%",
+ "left": "center"
+ },
+ "tooltip": {
+ "trigger": "axis"
+ },
+ "legend": {
+ "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
+ "top": "10%"
+ },
+ "grid": {
+ "left": "5%",
+ "right": "5%",
+ "bottom": "5%",
+ "top": "20%",
+ "containLabel": true
+ },
+ "toolbox": {
+ "feature": {
+ "saveAsImage": {
+ "title": "保存为图片"
+ }
+ }
+ },
+ "xAxis": {
+ "type": "category",
+ "boundaryGap": false,
+ "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+ },
+ "yAxis": {
+ "type": "value"
+ },
+ "series": [
+ {
+ "name": "邮件营销",
+ "type": "line",
+ "stack": "总量",
+ "data": [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ "name": "联盟广告",
+ "type": "line",
+ "stack": "总量",
+ "data": [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ "name": "视频广告",
+ "type": "line",
+ "stack": "总量",
+ "data": [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ "name": "直接访问",
+ "type": "line",
+ "stack": "总量",
+ "data": [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ "name": "搜索引擎",
+ "type": "line",
+ "stack": "总量",
+ "data": [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+}
+{{</* /echarts */>}}
+```
+
+一个 `YAML` 格式的 `echarts` 示例:
+
+```yaml
+{{</* echarts */>}}
+title:
+ text: 折线统计图
+ top: 2%
+ left: center
+tooltip:
+ trigger: axis
+legend:
+ data:
+ - 邮件营销
+ - 联盟广告
+ - 视频广告
+ - 直接访问
+ - 搜索引擎
+ top: 10%
+grid:
+ left: 5%
+ right: 5%
+ bottom: 5%
+ top: 20%
+ containLabel: true
+toolbox:
+ feature:
+ saveAsImage:
+ title: 保存为图片
+xAxis:
+ type: category
+ boundaryGap: false
+ data:
+ - 周一
+ - 周二
+ - 周三
+ - 周四
+ - 周五
+ - 周六
+ - 周日
+yAxis:
+ type: value
+series:
+ - name: 邮件营销
+ type: line
+ stack: 总量
+ data:
+ - 120
+ - 132
+ - 101
+ - 134
+ - 90
+ - 230
+ - 210
+ - name: 联盟广告
+ type: line
+ stack: 总量
+ data:
+ - 220
+ - 182
+ - 191
+ - 234
+ - 290
+ - 330
+ - 310
+ - name: 视频广告
+ type: line
+ stack: 总量
+ data:
+ - 150
+ - 232
+ - 201
+ - 154
+ - 190
+ - 330
+ - 410
+ - name: 直接访问
+ type: line
+ stack: 总量
+ data:
+ - 320
+ - 332
+ - 301
+ - 334
+ - 390
+ - 330
+ - 320
+ - name: 搜索引擎
+ type: line
+ stack: 总量
+ data:
+ - 820
+ - 932
+ - 901
+ - 934
+ - 1290
+ - 1330
+ - 1320
+{{</* /echarts */>}}
+```
+
+一个 `TOML` 格式的 `echarts` 示例:
+
+```toml
+{{</* echarts */>}}
+[title]
+text = "折线统计图"
+top = "2%"
+left = "center"
+
+[tooltip]
+trigger = "axis"
+
+[legend]
+data = [
+ "邮件营销",
+ "联盟广告",
+ "视频广告",
+ "直接访问",
+ "搜索引擎"
+]
+top = "10%"
+
+[grid]
+left = "5%"
+right = "5%"
+bottom = "5%"
+top = "20%"
+containLabel = true
+
+[toolbox]
+[toolbox.feature]
+[toolbox.feature.saveAsImage]
+title = "保存为图片"
+
+[xAxis]
+type = "category"
+boundaryGap = false
+data = [
+ "周一",
+ "周二",
+ "周三",
+ "周四",
+ "周五",
+ "周六",
+ "周日"
+]
+
+[yAxis]
+type = "value"
+
+[[series]]
+name = "邮件营销"
+type = "line"
+stack = "总量"
+data = [
+ 120.0,
+ 132.0,
+ 101.0,
+ 134.0,
+ 90.0,
+ 230.0,
+ 210.0
+]
+
+[[series]]
+name = "联盟广告"
+type = "line"
+stack = "总量"
+data = [
+ 220.0,
+ 182.0,
+ 191.0,
+ 234.0,
+ 290.0,
+ 330.0,
+ 310.0
+]
+
+[[series]]
+name = "视频广告"
+type = "line"
+stack = "总量"
+data = [
+ 150.0,
+ 232.0,
+ 201.0,
+ 154.0,
+ 190.0,
+ 330.0,
+ 410.0
+]
+
+[[series]]
+name = "直接访问"
+type = "line"
+stack = "总量"
+data = [
+ 320.0,
+ 332.0,
+ 301.0,
+ 334.0,
+ 390.0,
+ 330.0,
+ 320.0
+]
+
+[[series]]
+name = "搜索引擎"
+type = "line"
+stack = "总量"
+data = [
+ 820.0,
+ 932.0,
+ 901.0,
+ 934.0,
+ 1290.0,
+ 1330.0,
+ 1320.0
+]
+{{</* /echarts */>}}
+```
+
+呈现的输出效果如下:
+
+{{< echarts >}}
+{
+ "title": {
+ "text": "折线统计图",
+ "top": "2%",
+ "left": "center"
+ },
+ "tooltip": {
+ "trigger": "axis"
+ },
+ "legend": {
+ "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
+ "top": "10%"
+ },
+ "grid": {
+ "left": "5%",
+ "right": "5%",
+ "bottom": "5%",
+ "top": "20%",
+ "containLabel": true
+ },
+ "toolbox": {
+ "feature": {
+ "saveAsImage": {
+ "title": "保存为图片"
+ }
+ }
+ },
+ "xAxis": {
+ "type": "category",
+ "boundaryGap": false,
+ "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+ },
+ "yAxis": {
+ "type": "value"
+ },
+ "series": [
+ {
+ "name": "邮件营销",
+ "type": "line",
+ "stack": "总量",
+ "data": [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ "name": "联盟广告",
+ "type": "line",
+ "stack": "总量",
+ "data": [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ "name": "视频广告",
+ "type": "line",
+ "stack": "总量",
+ "data": [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ "name": "直接访问",
+ "type": "line",
+ "stack": "总量",
+ "data": [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ "name": "搜索引擎",
+ "type": "line",
+ "stack": "总量",
+ "data": [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+}
+{{< /echarts >}}
+
+`echarts` shortcode 还有以下命名参数:
+
+* **width** *[可选]* (**第一个**位置参数)
+
+ {{< version 0.2.0 >}} 数据可视化的宽度, 默认值是 `100%`.
+
+* **height** *[可选]* (**第二个**位置参数)
+
+ {{< version 0.2.0 >}} 数据可视化的高度, 默认值是 `30rem`.