update doc examples to echarts 5

1 files changed, 256 insertions, 288 deletions

diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
index a876add..803a3cf 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
@@ -534,72 +534,67 @@ 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]
+    "title": {
+        "text": "Summary Line Chart"
     },
-    {
-      "name": "Affiliate Advertising",
-      "type": "line",
-      "stack": "Total",
-      "data": [220, 182, 191, 234, 290, 330, 310]
+    "tooltip": {
+        "trigger": "axis"
     },
-    {
-      "name": "Video Advertising",
-      "type": "line",
-      "stack": "Total",
-      "data": [150, 232, 201, 154, 190, 330, 410]
+    "legend": {
+        "show": true,
+        "right": "5%"
     },
-    {
-      "name": "Direct View",
-      "type": "line",
-      "stack": "Total",
-      "data": [320, 332, 301, 334, 390, 330, 320]
+    "grid": {
+        "left": "3%",
+        "right": "4%",
+        "bottom": "3%",
+        "containLabel": true
     },
-    {
-      "name": "Search Engine",
-      "type": "line",
-      "stack": "Total",
-      "data": [820, 932, 901, 934, 1290, 1330, 1320]
-    }
-  ]
+    "toolbox": {
+        "feature": {
+            "saveAsImage": {}
+        }
+    },
+    "xAxis": {
+        "type": "category",
+        "boundaryGap": false,
+        "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+    },
+    "yAxis": {
+        "type": "value"
+    },
+    "series": [
+        {
+            "name": "Email",
+            "type": "line",
+            "stack": "total",
+            "data": [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            "name": "Affiliate",
+            "type": "line",
+            "stack": "total",
+            "data": [220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            "name": "Video",
+            "type": "line",
+            "stack": "total",
+            "data": [150, 232, 201, 154, 190, 330, 410]
+        },
+        {
+            "name": "Direct",
+            "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 */>}}
 ```
@@ -609,98 +604,89 @@ The same in `YAML` format:
 ```yaml
 {{</* echarts */>}}
 title:
-    text: Summary Line Chart
-    top: 2%
-    left: center
+  text: Summary Line Chart
 tooltip:
-    trigger: axis
+  trigger: axis
 legend:
-    data:
-        - Email Marketing
-        - Affiliate Advertising
-        - Video Advertising
-        - Direct View
-        - Search Engine
-    top: 10%
+  show: true
+  right: 5%
 grid:
-    left: 5%
-    right: 5%
-    bottom: 5%
-    top: 20%
-    containLabel: true
+  left: 3%
+  right: 4%
+  bottom: 3%
+  containLabel: true
 toolbox:
-    feature:
-        saveAsImage:
-            title: Save as Image
+  feature:
+    saveAsImage: {}
 xAxis:
-    type: category
-    boundaryGap: false
-    data:
-        - Monday
-        - Tuesday
-        - Wednesday
-        - Thursday
-        - Friday
-        - Saturday
-        - Sunday
+  type: category
+  boundaryGap: false
+  data:
+  - Monday
+  - Tuesday
+  - Wednesday
+  - Thursday
+  - Friday
+  - Saturday
+  - Sunday
 yAxis:
-    type: value
+  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
+- name: Email
+  type: line
+  stack: total
+  data:
+  - 120
+  - 132
+  - 101
+  - 134
+  - 90
+  - 230
+  - 210
+- name: Affiliate
+  type: line
+  stack: total
+  data:
+  - 220
+  - 182
+  - 191
+  - 234
+  - 290
+  - 330
+  - 310
+- name: Video
+  type: line
+  stack: total
+  data:
+  - 150
+  - 232
+  - 201
+  - 154
+  - 190
+  - 330
+  - 410
+- name: Direct
+  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 */>}}
 ```
 
@@ -709,119 +695,106 @@ The same in `TOML` format:
 ```toml
 {{</* echarts */>}}
 [title]
-text = "Summary Line Chart"
-top = "2%"
-left = "center"
+text = 'Summary Line Chart'
 
 [tooltip]
-trigger = "axis"
+trigger = 'axis'
 
 [legend]
-data = [
-  "Email Marketing",
-  "Affiliate Advertising",
-  "Video Advertising",
-  "Direct View",
-  "Search Engine"
-]
-top = "10%"
+show = true
+right = '5%'
 
 [grid]
-left = "5%"
-right = "5%"
-bottom = "5%"
-top = "20%"
+left = '3%'
+right = '4%'
+bottom = '3%'
 containLabel = true
-
-[toolbox]
-[toolbox.feature]
 [toolbox.feature.saveAsImage]
-title = "Save as Image"
 
 [xAxis]
-type = "category"
+type = 'category'
 boundaryGap = false
 data = [
-  "Monday",
-  "Tuesday",
-  "Wednesday",
-  "Thursday",
-  "Friday",
-  "Saturday",
-  "Sunday"
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday',
 ]
 
 [yAxis]
-type = "value"
+type = 'value'
 
 [[series]]
-name = "Email Marketing"
-type = "line"
-stack = "Total"
+name = 'Email'
+type = 'line'
+stack = 'total'
 data = [
-  120.0,
-  132.0,
-  101.0,
-  134.0,
-  90.0,
-  230.0,
-  210.0
+    120,
+    132,
+    101,
+    134,
+    90,
+    230,
+    210,
 ]
 
 [[series]]
-name = "Affiliate Advertising"
-type = "line"
-stack = "Total"
+name = 'Affiliate'
+type = 'line'
+stack = 'total'
 data = [
-  220.0,
-  182.0,
-  191.0,
-  234.0,
-  290.0,
-  330.0,
-  310.0
+    220,
+    182,
+    191,
+    234,
+    290,
+    330,
+    310,
 ]
 
 [[series]]
-name = "Video Advertising"
-type = "line"
-stack = "Total"
+name = 'Video'
+type = 'line'
+stack = 'total'
 data = [
-  150.0,
-  232.0,
-  201.0,
-  154.0,
-  190.0,
-  330.0,
-  410.0
+    150,
+    232,
+    201,
+    154,
+    190,
+    330,
+    410,
 ]
 
 [[series]]
-name = "Direct View"
-type = "line"
-stack = "Total"
+name = 'Direct'
+type = 'line'
+stack = 'total'
 data = [
-  320.0,
-  332.0,
-  301.0,
-  334.0,
-  390.0,
-  330.0,
-  320.0
+    320,
+    332,
+    301,
+    334,
+    390,
+    330,
+    320,
 ]
 
 [[series]]
-name = "Search Engine"
-type = "line"
-stack = "Total"
+name = 'Search Engine'
+type = 'line'
+stack = 'total'
 data = [
-  820.0,
-  932.0,
-  901.0,
-  934.0,
-  1290.0,
-  1330.0,
-  1320.0
+    820,
+    932,
+    901,
+    934,
+    1290,
+    1330,
+    1320,
 ]
 {{</* /echarts */>}}
 ```
@@ -830,72 +803,67 @@ 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]
+    "title": {
+        "text": "Summary Line Chart"
+    },
+    "tooltip": {
+        "trigger": "axis"
+    },
+    "legend": {
+        "show": true,
+        "right": "5%"
+    },
+    "grid": {
+        "left": "3%",
+        "right": "4%",
+        "bottom": "3%",
+        "containLabel": true
     },
-    {
-      "name": "Affiliate Advertising",
-      "type": "line",
-      "stack": "Total",
-      "data": [220, 182, 191, 234, 290, 330, 310]
+    "toolbox": {
+        "feature": {
+            "saveAsImage": {}
+        }
     },
-    {
-      "name": "Video Advertising",
-      "type": "line",
-      "stack": "Total",
-      "data": [150, 232, 201, 154, 190, 330, 410]
+    "xAxis": {
+        "type": "category",
+        "boundaryGap": false,
+        "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
     },
-    {
-      "name": "Direct View",
-      "type": "line",
-      "stack": "Total",
-      "data": [320, 332, 301, 334, 390, 330, 320]
+    "yAxis": {
+        "type": "value"
     },
-    {
-      "name": "Search Engine",
-      "type": "line",
-      "stack": "Total",
-      "data": [820, 932, 901, 934, 1290, 1330, 1320]
-    }
-  ]
+    "series": [
+        {
+            "name": "Email",
+            "type": "line",
+            "stack": "total",
+            "data": [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            "name": "Affiliate",
+            "type": "line",
+            "stack": "total",
+            "data": [220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            "name": "Video",
+            "type": "line",
+            "stack": "total",
+            "data": [150, 232, 201, 154, 190, 330, 410]
+        },
+        {
+            "name": "Direct",
+            "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 >}}