From 51fb029ca27d67d7cd67352cdede45e5b25868f7 Mon Sep 17 00:00:00 2001 From: Christoph Cullmann Date: Sun, 14 Aug 2022 19:01:21 +0200 Subject: switch back to LoveIt, other theme is deprectated --- .../featured-image.jpg | Bin 0 -> 53696 bytes .../index.en.md | 414 +++++++++++++++++++++ .../index.zh-cn.md | 414 +++++++++++++++++++++ 3 files changed, 828 insertions(+) create mode 100644 themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg create mode 100644 themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md create mode 100644 themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.zh-cn.md (limited to 'themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode') 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 Binary files /dev/null and b/themes/LoveIt/exampleSite/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg 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. + + + +**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 +{{}} +{ + "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] + } + ] +} +{{}} +``` + +The same in `YAML` format: + +```yaml +{{}} +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 +{{}} +``` + +The same in `TOML` format: + +```toml +{{}} +[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 +] +{{}} +``` + +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/) 库提供数据可视化的功能. + + + +**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 +{{}} +{ + "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] + } + ] +} +{{}} +``` + +一个 `YAML` 格式的 `echarts` 示例: + +```yaml +{{}} +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 +{{}} +``` + +一个 `TOML` 格式的 `echarts` 示例: + +```toml +{{}} +[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 >}} +{ + "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`. -- cgit v1.2.3