switch back to LoveIt, other theme is deprectated

2022-08-14 19:01:21 +02:00 · 2022-08-14 19:01:21 +02:00 · 51fb029ca2
commit 51fb029ca2
parent 260b6803e7
4260 changed files with 49552 additions and 87082 deletions
--- 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
@ -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`.