From 31ce00f484d67fb13ca1281316e4e9174a77ef95 Mon Sep 17 00:00:00 2001
From: purpose <zhangsu.melon0@bytedance.com>
Date: Mon, 28 Aug 2023 16:53:52 +0800
Subject: [PATCH] chore: add readme for document

---
 CONTRIBUTING.md                 |    2 +
 CONTRIBUTING.zh-CN.md           |    2 +
 README.md                       |    9 +
 README.zh-CN.md                 |    9 +
 docs/assets/examples/menu.json  | 3028 +++++++++++++++++++++++++------
 docs/src/option.tsx             |    5 +-
 docs/src/option/description.tsx |   67 +-
 7 files changed, 2532 insertions(+), 590 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b83a4c4457..bfd1dda712 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -66,3 +66,5 @@ After cloning VChart, run `rush update` to fetch its dependencies. Then, you can
 4. `rush test` runs the complete test suite.
 5. `rush run -p <project_name> -s <script>` run the specified script for the specified project, eg. `rush run -p @visactor/vchart -s start`
 6. `rush prettier --dir <project_relative_path> --ext <file_type>` prettier the specified script for the specified project, eg. `rush prettier --dir packages/vchart --ext ts`
+
+If you want to update documents, you can run `rush docs` to preview VChart document contents locally.
diff --git a/CONTRIBUTING.zh-CN.md b/CONTRIBUTING.zh-CN.md
index 968d278a80..4b41c99e0f 100644
--- a/CONTRIBUTING.zh-CN.md
+++ b/CONTRIBUTING.zh-CN.md
@@ -69,3 +69,5 @@ VisActor 团队会关注所有的 pull request，我们会 review 以及合并
 4. `rush test` 运行所有项目的 test 脚本
 5. `rush run -p <project_name> -s <script>` 运行指定项目的指定脚本，eg. `rush run -p @visactor/vchart -s start`
 6. `rush prettier --dir <project_relative_path> --ext <file_type>` 格式化指定项目的源代码，eg. `rush prettier --dir packages/vchart --ext ts`
+
+如果你需要更新文档内容，你可以执行 `rush docs` 在本地运行 VChart 的文档内容预览。
diff --git a/README.md b/README.md
index 588bea3221..4b10974c48 100644
--- a/README.md
+++ b/README.md
@@ -131,6 +131,15 @@ $ rush start
 $ rush react
 ```
 
+## 📖 Documents
+
+After installation & clone & update, run docs to preview documents locally.
+
+```bash
+# start vchart document server
+$ rush docs
+```
+
 ## 🔗 Related Links
 
 - [Homepage](https://www.visactor.io/vchart)
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 6f9a93aee5..28ec547780 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -131,6 +131,15 @@ $ rush start
 $ rush react
 ```
 
+## 📖 Documents
+
+安装并且更新依赖后，可以执行 docs 命令，开启 vchart 的本地文档预览
+
+```bash
+# start vchart document server
+$ rush docs
+```
+
 ## 🔗 相关链接
 
 - [主页](https://www.visactor.io/vchart)
diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json
index ba652eff58..95b98bbe10 100644
--- a/docs/assets/examples/menu.json
+++ b/docs/assets/examples/menu.json
@@ -8,11 +8,52 @@
         "en": "area-chart"
       },
       "children": [
+        {
+          "path": "area-style",
+          "title": {
+            "zh": "面积图样式",
+            "en": "面积图样式"
+          },
+          "meta": {
+            "title": "面积图样式",
+            "keywords": "areaChart,comparison,trend,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/area-style.png",
+            "link": "",
+            "option": "areaChart"
+          }
+        },
+        {
+          "path": "area-with-marker",
+          "title": {
+            "zh": "多系列面积图",
+            "en": "Multi-series area chart"
+          },
+          "meta": {
+            "title": "Multi-series area chart",
+            "keywords": "areaChart,comparison,trend,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/area-with-marker.png",
+            "link": "",
+            "option": "areaChart"
+          }
+        },
         {
           "path": "basic-area",
           "title": {
             "zh": "基础面积图",
             "en": "Basic Area Chart"
+          },
+          "meta": {
+            "title": "Basic Area Chart",
+            "keywords": "areaChart,comparison,trend,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/basic-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -20,6 +61,15 @@
           "title": {
             "zh": "垂直面积图",
             "en": "Vertical Area Chart"
+          },
+          "meta": {
+            "title": "Vertical Area Chart",
+            "keywords": "areaChart,comparison,trend,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/horizontal-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -27,6 +77,15 @@
           "title": {
             "zh": "带负值面积图",
             "en": "Area Chart with Negative Values"
+          },
+          "meta": {
+            "title": "Area Chart with Negative Values",
+            "keywords": "areaChart,comparison,trend,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/negative-values-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -34,6 +93,15 @@
           "title": {
             "zh": "存在空值的面积图",
             "en": "Area chart with null values"
+          },
+          "meta": {
+            "title": "Area chart with null values",
+            "keywords": "areaChart,comparison,trend,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/null-value-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -41,6 +109,15 @@
           "title": {
             "zh": "百分比堆叠面积图",
             "en": "Percentage Stacked Area Chart"
+          },
+          "meta": {
+            "title": "Percentage Stacked Area Chart",
+            "keywords": "areaChart,comparison,trend,area,proportion,composition",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/percentage-stacked-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -48,6 +125,31 @@
           "title": {
             "zh": "区间面积图",
             "en": "Range Area Chart"
+          },
+          "meta": {
+            "title": "Range Area Chart",
+            "keywords": "areaChart,comparison,trend,area,rangeAreaChart",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/range-area.png",
+            "link": "",
+            "option": "areaChart"
+          }
+        },
+        {
+          "path": "segment-range-area",
+          "title": {
+            "zh": "分段区间面积图",
+            "en": "Segment Range Area Chart"
+          },
+          "meta": {
+            "title": "Segment Range Area Chart",
+            "keywords": "areaChart,comparison,trend,area,rangeAreaChart",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/area-chart-segment-range-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -55,6 +157,15 @@
           "title": {
             "zh": "平滑面积图",
             "en": "Smoothed Area Chart"
+          },
+          "meta": {
+            "title": "Smoothed Area Chart",
+            "keywords": "areaChart,comparison,trend,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/smoothed-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -62,6 +173,15 @@
           "title": {
             "zh": "堆叠面积图",
             "en": "Stacked Area Chart"
+          },
+          "meta": {
+            "title": "Stacked Area Chart",
+            "keywords": "areaChart,comparison,trend,area,composition",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/stacked-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -69,6 +189,15 @@
           "title": {
             "zh": "阶梯面积图",
             "en": "Step Area Chart"
+          },
+          "meta": {
+            "title": "Step Area Chart",
+            "keywords": "areaChart,comparison,trend,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/step-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -76,6 +205,15 @@
           "title": {
             "zh": "河流图",
             "en": "Streamgraph"
+          },
+          "meta": {
+            "title": "Streamgraph",
+            "keywords": "areaChart,comparison,trend,area,streamgraph,composition",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/stream-graph.png",
+            "link": "",
+            "option": ""
           }
         },
         {
@@ -83,27 +221,15 @@
           "title": {
             "zh": "非堆叠面积图",
             "en": "非堆叠面积图"
-          }
-        },
-        {
-          "path": "area-with-marker",
-          "title": {
-            "zh": "多系列面积图",
-            "en": "Multi-series area chart"
-          }
-        },
-        {
-          "path": "area-style",
-          "title": {
-            "zh": "面积图样式",
-            "en": "面积图样式"
-          }
-        },
-        {
-          "path": "segment-range-area",
-          "title": {
-            "zh": "分段区间面积图",
-            "en": "Segment Range Area Chart"
+          },
+          "meta": {
+            "title": "非堆叠面积图",
+            "keywords": "areaChart,comparison,trend,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/area-chart/unstacked-area.png",
+            "link": "",
+            "option": "areaChart"
           }
         }
       ]
@@ -120,6 +246,15 @@
           "title": {
             "zh": "坐标轴动画",
             "en": "Axis Animation"
+          },
+          "meta": {
+            "title": "Axis Animation",
+            "keywords": "barChart,animation,axis,trend,comparison,rectangle",
+            "category": "demo",
+            "group": "axis",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/animation.png",
+            "link": "",
+            "option": "barChart#axes"
           }
         },
         {
@@ -127,6 +262,15 @@
           "title": {
             "zh": "网格线填充",
             "en": "Grid Line Fill"
+          },
+          "meta": {
+            "title": "Grid Line Fill",
+            "keywords": "barChart,comparison,distribution,rank,composition,rectangle,axis",
+            "category": "demo",
+            "group": "axis",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/grid-style.png",
+            "link": "",
+            "option": "lineChart#axes"
           }
         },
         {
@@ -134,6 +278,15 @@
           "title": {
             "zh": "坐标轴交互",
             "en": "Axis Interaction"
+          },
+          "meta": {
+            "title": "Axis Interaction",
+            "keywords": "areaChart,comparison,composition,trend,area,axis",
+            "category": "demo",
+            "group": "axis",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/interactive.png",
+            "link": "",
+            "option": "areaChart#axes"
           }
         },
         {
@@ -141,6 +294,31 @@
           "title": {
             "zh": "坐标轴反转",
             "en": "Axis Inversion"
+          },
+          "meta": {
+            "title": "Axis Inversion",
+            "keywords": "areaChart,comparison,trend,area,axis",
+            "category": "demo",
+            "group": "axis",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/inverse.png",
+            "link": "",
+            "option": "lineChart#axes"
+          }
+        },
+        {
+          "path": "log-axis",
+          "title": {
+            "zh": "log轴",
+            "en": "log轴"
+          },
+          "meta": {
+            "title": "log轴",
+            "keywords": "lineChart,comparison,composition,trend,axis",
+            "category": "demo",
+            "group": "axis",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/ffc3a9b5518762d274121ff06.jpeg",
+            "link": "",
+            "option": "lineChart#axes"
           }
         },
         {
@@ -148,6 +326,15 @@
           "title": {
             "zh": "0 刻度轴线",
             "en": "0 刻度轴线"
+          },
+          "meta": {
+            "title": "0 刻度轴线",
+            "keywords": "scatterChart,comparison,distribution,scatter,axis",
+            "category": "demo",
+            "group": "axis",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/on-zero.png",
+            "link": "",
+            "option": "scatterChart#axes"
           }
         },
         {
@@ -155,6 +342,15 @@
           "title": {
             "zh": "极坐标轴配置",
             "en": "Polar Axis Configuration"
+          },
+          "meta": {
+            "title": "Polar Axis Configuration",
+            "keywords": "roseChart,comparison,composition,circle,axis",
+            "category": "demo",
+            "group": "axis",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/polar.png",
+            "link": "",
+            "option": "roseChart#axes"
           }
         },
         {
@@ -162,6 +358,15 @@
           "title": {
             "zh": "通用样式配置",
             "en": "General Style Configuration"
+          },
+          "meta": {
+            "title": "General Style Configuration",
+            "keywords": "lineChart,comparison,trend,line,axis",
+            "category": "demo",
+            "group": "axis",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/style.png",
+            "link": "",
+            "option": "lineChart#axes"
           }
         },
         {
@@ -169,13 +374,15 @@
           "title": {
             "zh": "子刻度线和子网格线",
             "en": "Sub-ticks and Sub-grid lines"
-          }
-        },
-        {
-          "path": "log-axis",
-          "title": {
-            "zh": "log轴",
-            "en": "log轴"
+          },
+          "meta": {
+            "title": "Sub-ticks and Sub-grid lines",
+            "keywords": "lineChart,comparison,trend,line,axis",
+            "category": "demo",
+            "group": "axis",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/subtick-and-subgrid.png",
+            "link": "",
+            "option": "lineChart#axes"
           }
         }
       ]
@@ -192,6 +399,15 @@
           "title": {
             "zh": "基础条形图",
             "en": "Base Bar Chart"
+          },
+          "meta": {
+            "title": "Base Bar Chart",
+            "keywords": "barChart,comparison,distribution,rank,rectangle",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/23e5d313c2c3a66d4ca806005.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -199,6 +415,15 @@
           "title": {
             "zh": "基础柱状图",
             "en": "Basic Column Chart"
+          },
+          "meta": {
+            "title": "Basic Column Chart",
+            "keywords": "barChart, comparison, distribution, rank, rectangle",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/basic-column.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -206,6 +431,15 @@
           "title": {
             "zh": "双向条形图",
             "en": "Bi-directional Bar Chart"
+          },
+          "meta": {
+            "title": "Bi-directional Bar Chart",
+            "keywords": "barChart,comparison,distribution,rank,rectangle",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/bi-direction-bar.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -213,6 +447,15 @@
           "title": {
             "zh": "双向堆积分组柱状图",
             "en": "Bi-direction Stack Grouped Bar Chart"
+          },
+          "meta": {
+            "title": "Bi-direction Stack Grouped Bar Chart",
+            "keywords": "barChart,comparison,distribution,rectangle,composition,rank",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c81706.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -220,6 +463,47 @@
           "title": {
             "zh": "渐变圆角柱图",
             "en": "Gradient Rounded Bar Chart"
+          },
+          "meta": {
+            "title": "Gradient Rounded Bar Chart",
+            "keywords": "barChart,comparison,distribution,rank,rectangle,gradient",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/gradient-column.png",
+            "link": "",
+            "option": "barChart"
+          }
+        },
+        {
+          "path": "group-bar-with-barGapInGroup",
+          "title": {
+            "zh": "分组柱图组内间距调整",
+            "en": "Spacing adjustment within grouped bars"
+          },
+          "meta": {
+            "title": "Spacing adjustment within grouped bars",
+            "keywords": "barChart,comparison,distribution,rank,rectangle",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/group-bar-with-barGapInGroup.png",
+            "link": "",
+            "option": "barChart"
+          }
+        },
+        {
+          "path": "group-bar-with-padding",
+          "title": {
+            "zh": "分组柱状图间隔",
+            "en": "Group histogram interval"
+          },
+          "meta": {
+            "title": "Group histogram interval",
+            "keywords": "barChart,comparison,distribution,rank,rectangle",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/55297520732ada18bb7183f00.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -227,6 +511,15 @@
           "title": {
             "zh": "分组条形图",
             "en": "Grouped Bar Chart"
+          },
+          "meta": {
+            "title": "Grouped Bar Chart",
+            "keywords": "barChart, comparison, distribution, rank, rectangle",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/group-bar.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -234,6 +527,15 @@
           "title": {
             "zh": "分组柱状图",
             "en": "Grouped Bar Chart"
+          },
+          "meta": {
+            "title": "Grouped Bar Chart",
+            "keywords": "barChart,comparison,distribution,rank,rectangle",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/group-column.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -241,6 +543,15 @@
           "title": {
             "zh": "分组堆叠柱状图",
             "en": "Grouped Stacked Column Chart"
+          },
+          "meta": {
+            "title": "Grouped Stacked Column Chart",
+            "keywords": "barChart,comparison,distribution,rectangle,composition,rank",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/group-stack-column.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -248,6 +559,15 @@
           "title": {
             "zh": "分组百分比堆叠柱状图",
             "en": "Grouped Percentage Stacked Bar Chart"
+          },
+          "meta": {
+            "title": "Grouped Percentage Stacked Bar Chart",
+            "keywords": "barChart,comparison,distribution,rectangle,composition,proportion,rank",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/group-stack-percentage-column.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -255,6 +575,15 @@
           "title": {
             "zh": "人口金字塔",
             "en": "Population Pyramid"
+          },
+          "meta": {
+            "title": "Population Pyramid",
+            "keywords": "barChart,comparison,distribution,rank,rectangle",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/ffc3a9b5518762d274121ff03.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -262,6 +591,15 @@
           "title": {
             "zh": "堆叠柱状图",
             "en": "Stacked Bar Chart"
+          },
+          "meta": {
+            "title": "Stacked Bar Chart",
+            "keywords": "barChart,comparison,distribution,rank,rectangle,composition",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/stack-column.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -269,6 +607,15 @@
           "title": {
             "zh": "百分比堆叠条形图",
             "en": "Percentage Stacked Bar Chart"
+          },
+          "meta": {
+            "title": "Percentage Stacked Bar Chart",
+            "keywords": "barChart,comparison,distribution,rectangle,composition,proportion",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/stack-percentage-bar.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -276,24 +623,27 @@
           "title": {
             "zh": "百分比堆叠柱状图",
             "en": "Percentage Stacked Bar Chart"
-          }
-        },
-        {
-          "path": "group-bar-with-padding",
-          "title": {
-            "zh": "分组柱状图间隔",
-            "en": "Group histogram interval"
-          }
-        },
-        {
-          "path": "group-bar-with-barGapInGroup",
-          "title": {
-            "zh": "分组柱图组内间距调整",
-            "en": "Spacing adjustment within grouped bars"
+          },
+          "meta": {
+            "title": "Percentage Stacked Bar Chart",
+            "keywords": "barChart,comparison,distribution,rectangle,composition,proportion",
+            "category": "examples",
+            "group": "bar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/stack-percentage-column.png",
+            "link": "",
+            "option": "barChart"
           }
         }
       ]
     },
+    {
+      "path": "bi-direction-stack-column_files",
+      "title": {
+        "zh": "bi-direction-stack-column_files",
+        "en": "bi-direction-stack-column_files"
+      },
+      "children": []
+    },
     {
       "path": "box-plot",
       "title": {
@@ -306,6 +656,15 @@
           "title": {
             "zh": "基础箱型图",
             "en": "Basic Box Plot"
+          },
+          "meta": {
+            "title": "Basic Box Plot",
+            "keywords": "boxPlot, distribution, strip",
+            "category": "examples",
+            "group": "box plot",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/box-plot/basic-box-plot.png",
+            "link": "",
+            "option": "boxPlotChart"
           }
         },
         {
@@ -313,6 +672,15 @@
           "title": {
             "zh": "箱型图样式",
             "en": "Box Plot Style"
+          },
+          "meta": {
+            "title": "Box Plot Style",
+            "keywords": "boxPlot, distribution, comparison, strip",
+            "category": "examples",
+            "group": "box plot",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/box-plot/box-plot-style.png",
+            "link": "",
+            "option": "boxPlotChart"
           }
         },
         {
@@ -320,6 +688,193 @@
           "title": {
             "zh": "分组箱型图",
             "en": "Grouped Box Plot"
+          },
+          "meta": {
+            "title": "Grouped Box Plot",
+            "keywords": "boxPlot, distribution, comparison, strip",
+            "category": "examples",
+            "group": "box plot",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/box-plot/grouped-box-plot.png",
+            "link": "",
+            "option": "boxPlotChart"
+          }
+        }
+      ]
+    },
+    {
+      "path": "brush",
+      "title": {
+        "zh": "brush",
+        "en": "brush"
+      },
+      "children": [
+        {
+          "path": "polygon-brush",
+          "title": {
+            "zh": "不规则框选",
+            "en": "Irregular Rectangle Selection"
+          },
+          "meta": {
+            "title": "Irregular Rectangle Selection",
+            "keywords": "scatterChart,brush",
+            "category": "demo",
+            "group": "brush",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/brush/polygon-brush.png",
+            "link": "",
+            "option": "scatterChart#brush"
+          }
+        },
+        {
+          "path": "rect-linked-brush",
+          "title": {
+            "zh": "矩形关联框选",
+            "en": "Rect Linked Brush"
+          },
+          "meta": {
+            "title": "Rect Linked Brush",
+            "keywords": "scatterChart,brush",
+            "category": "demo",
+            "group": "brush",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/brush/rect-linked-brush.png",
+            "link": "",
+            "option": "commonChart#brush"
+          }
+        },
+        {
+          "path": "x-linked-brush",
+          "title": {
+            "zh": "横向选择框选",
+            "en": "Horizontal Selection Box"
+          },
+          "meta": {
+            "title": "Horizontal Selection Box",
+            "keywords": "brush",
+            "category": "demo",
+            "group": "brush",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/brush/x-linked-brush.png",
+            "link": "",
+            "option": "commonChart#brush"
+          }
+        }
+      ]
+    },
+    {
+      "path": "chart-3d",
+      "title": {
+        "zh": "chart-3d",
+        "en": "chart-3d"
+      },
+      "children": [
+        {
+          "path": "area3d",
+          "title": {
+            "zh": "3D面积图",
+            "en": "3D面积图"
+          },
+          "meta": {
+            "title": "3D面积图",
+            "keywords": "space",
+            "category": "examples",
+            "group": "chart-3d",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png",
+            "link": "",
+            "option": "AreaChart"
+          }
+        },
+        {
+          "path": "bar3d",
+          "title": {
+            "zh": "3D 基础柱状图",
+            "en": "3D Base Bar Chart"
+          },
+          "meta": {
+            "title": "3D Base Bar Chart",
+            "keywords": "space",
+            "category": "examples",
+            "group": "chart-3d",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/bar3d.png",
+            "link": "",
+            "option": "bar3dChart"
+          }
+        },
+        {
+          "path": "funnel3d",
+          "title": {
+            "zh": "3D 基础漏斗图",
+            "en": "3D Basic Funnel Chart"
+          },
+          "meta": {
+            "title": "3D Basic Funnel Chart",
+            "keywords": "space",
+            "category": "examples",
+            "group": "chart-3d",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/funnel3d.png",
+            "link": "",
+            "option": "funnel3dChart"
+          }
+        },
+        {
+          "path": "line3d",
+          "title": {
+            "zh": "3D 折线图",
+            "en": "3D 折线图"
+          },
+          "meta": {
+            "title": "3D 折线图",
+            "keywords": "space",
+            "category": "examples",
+            "group": "chart-3d",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/line3d.png",
+            "link": "",
+            "option": "lineChart"
+          }
+        },
+        {
+          "path": "pie3d",
+          "title": {
+            "zh": "3D 基础饼图",
+            "en": "3D Basic Pie Chart"
+          },
+          "meta": {
+            "title": "3D Basic Pie Chart",
+            "keywords": "space",
+            "category": "examples",
+            "group": "chart-3d",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/pie3d.png",
+            "link": "",
+            "option": "pieChart"
+          }
+        },
+        {
+          "path": "scatter3d",
+          "title": {
+            "zh": "3D 散点图",
+            "en": "3D Scatter Chart"
+          },
+          "meta": {
+            "title": "3D Scatter Chart",
+            "keywords": "space",
+            "category": "examples",
+            "group": "chart-3d",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/scatter3d.png",
+            "link": "",
+            "option": "scatterChart"
+          }
+        },
+        {
+          "path": "wordcloud3d",
+          "title": {
+            "zh": "3D 形状词云图",
+            "en": "3D Shape Word Cloud"
+          },
+          "meta": {
+            "title": "3D Shape Word Cloud",
+            "keywords": "space",
+            "category": "examples",
+            "group": "chart-3d",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/wordcloud3d.gif",
+            "link": "",
+            "option": "wordCloud3dChart"
           }
         }
       ]
@@ -336,6 +891,15 @@
           "title": {
             "zh": "基础 CirclePacking 图",
             "en": "Basic CirclePacking Chart"
+          },
+          "meta": {
+            "title": "Basic CirclePacking Chart",
+            "keywords": "circlePacking,composition,circle,relationShip",
+            "category": "examples",
+            "group": "CirclePacking",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/circle-packing-chart/basic-circle-packing.png",
+            "link": "",
+            "option": "circlePackingChart"
           }
         },
         {
@@ -343,6 +907,15 @@
           "title": {
             "zh": "多根节点 CirclePacking 图",
             "en": "Multi-root CirclePacking Chart"
+          },
+          "meta": {
+            "title": "Multi-root CirclePacking Chart",
+            "keywords": "circlePacking,composition,circle,relationShip",
+            "category": "examples",
+            "group": "CirclePacking",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/circle-packing-chart/circle-packing-multiple-roots.png",
+            "link": "",
+            "option": "circlePackingChart"
           }
         },
         {
@@ -350,6 +923,15 @@
           "title": {
             "zh": "带内边距的 CirclePacking 图",
             "en": "CirclePacking Chart with Padding"
+          },
+          "meta": {
+            "title": "CirclePacking Chart with Padding",
+            "keywords": "circlePacking,composition,circle,relationShip",
+            "category": "examples",
+            "group": "CirclePacking",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/circle-packing-chart/circle-packing-padding.png",
+            "link": "",
+            "option": "circlePackingChart"
           }
         }
       ]
@@ -366,6 +948,31 @@
           "title": {
             "zh": "组合图自定义多行多列布局",
             "en": "Custom Multi-Row Multi-Column Layout in Combination Charts"
+          },
+          "meta": {
+            "title": "Custom Multi-Row Multi-Column Layout in Combination Charts",
+            "keywords": "commonChart",
+            "category": "examples",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/bar-combine.png",
+            "link": "",
+            "option": "commonChart"
+          }
+        },
+        {
+          "path": "bar-line",
+          "title": {
+            "zh": "特殊轴效果的线柱组合图",
+            "en": "Bar-Line Combination Chart With UnNormal Axis"
+          },
+          "meta": {
+            "title": "Bar-Line Combination Chart With UnNormal Axis",
+            "keywords": "commonChart",
+            "category": "demo",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/single-region.png",
+            "link": "",
+            "option": "commonChart"
           }
         },
         {
@@ -373,6 +980,15 @@
           "title": {
             "zh": "单列组合图",
             "en": "Combination Chart with Single Column"
+          },
+          "meta": {
+            "title": "Combination Chart with Single Column",
+            "keywords": "commonChart",
+            "category": "demo",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/col-line.png",
+            "link": "",
+            "option": "commonChart"
           }
         },
         {
@@ -380,6 +996,15 @@
           "title": {
             "zh": "多 region 饼图",
             "en": "Multi-region Pie Chart"
+          },
+          "meta": {
+            "title": "Multi-region Pie Chart",
+            "keywords": "commonChart",
+            "category": "demo",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/col-pie.png",
+            "link": "",
+            "option": "commonChart"
           }
         },
         {
@@ -387,6 +1012,15 @@
           "title": {
             "zh": "双轴图",
             "en": "Dual Axis Chart"
+          },
+          "meta": {
+            "title": "Dual Axis Chart",
+            "keywords": "commonChart",
+            "category": "demo",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/dual-axis.png",
+            "link": "",
+            "option": "commonChart"
           }
         },
         {
@@ -394,6 +1028,15 @@
           "title": {
             "zh": "缓动函数可视化",
             "en": "Easing Functions Visualization"
+          },
+          "meta": {
+            "title": "Easing Functions Visualization",
+            "keywords": "commonChart",
+            "category": "demo",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/easing-visualization.png",
+            "link": "",
+            "option": "commonChart"
           }
         },
         {
@@ -401,6 +1044,15 @@
           "title": {
             "zh": "线饼组合图",
             "en": "Line-Pie Combination Chart"
+          },
+          "meta": {
+            "title": "Line-Pie Combination Chart",
+            "keywords": "commonChart",
+            "category": "demo",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/line-pie.png",
+            "link": "",
+            "option": "commonChart"
           }
         },
         {
@@ -408,6 +1060,15 @@
           "title": {
             "zh": "极坐标系下的组合图",
             "en": "Combination Chart in Polar Coordinate System"
+          },
+          "meta": {
+            "title": "Combination Chart in Polar Coordinate System",
+            "keywords": "commonChart",
+            "category": "examples",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/polar-combine.png",
+            "link": "",
+            "option": "commonChart"
           }
         },
         {
@@ -415,6 +1076,15 @@
           "title": {
             "zh": "组合图自定义单行多列布局",
             "en": "Custom Single Row Multi-Column Layout for Combination Charts"
+          },
+          "meta": {
+            "title": "Custom Single Row Multi-Column Layout for Combination Charts",
+            "keywords": "commonChart",
+            "category": "examples",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/scatter-combine.png",
+            "link": "",
+            "option": "commonChart"
           }
         },
         {
@@ -422,13 +1092,15 @@
           "title": {
             "zh": "基础组合图",
             "en": "Basic Combination Chart"
-          }
-        },
-        {
-          "path": "bar-line",
-          "title": {
-            "zh": "特殊轴效果的线柱组合图",
-            "en": "Bar-Line Combination Chart With UnNormal Axis"
+          },
+          "meta": {
+            "title": "Basic Combination Chart",
+            "keywords": "commonChart",
+            "category": "demo",
+            "group": "combination",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/combination/single-region.png",
+            "link": "",
+            "option": "commonChart"
           }
         }
       ]
@@ -443,7 +1115,17 @@
         {
           "path": "line",
           "title": {
-            "zh": "十字辅助线"
+            "zh": "十字辅助线",
+            "en": "Crosshair Auxiliary Line"
+          },
+          "meta": {
+            "title": "Crosshair Auxiliary Line",
+            "keywords": "lineChart, comparison, trend, line, crosshair",
+            "category": "demo",
+            "group": "crosshair",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/crosshair/line.png",
+            "link": "",
+            "option": "lineChart#crosshair"
           }
         },
         {
@@ -451,6 +1133,15 @@
           "title": {
             "zh": "组合图 crosshair",
             "en": "Combined chart crosshair"
+          },
+          "meta": {
+            "title": "Combined chart crosshair",
+            "keywords": "barChart, comparison, rectangle, crosshair, rank, distribution",
+            "category": "demo",
+            "group": "crosshair",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/crosshair/multiple-region.png",
+            "link": "",
+            "option": "commonChart#crosshair"
           }
         },
         {
@@ -458,6 +1149,15 @@
           "title": {
             "zh": "雷达图的 crosshair",
             "en": "Crosshair of Radar Chart"
+          },
+          "meta": {
+            "title": "Crosshair of Radar Chart",
+            "keywords": "radarChart,comparison,crosshair,circle",
+            "category": "demo",
+            "group": "crosshair",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/crosshair/polar-line.png",
+            "link": "",
+            "option": "radarChart#crosshair"
           }
         },
         {
@@ -465,6 +1165,15 @@
           "title": {
             "zh": "玫瑰图的 crosshair",
             "en": "Rose Chart Crosshair"
+          },
+          "meta": {
+            "title": "Rose Chart Crosshair",
+            "keywords": "roseChart,comparison,circle,crosshair",
+            "category": "demo",
+            "group": "crosshair",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/crosshair/polar-rect.png",
+            "link": "",
+            "option": "roseChart#crosshair"
           }
         },
         {
@@ -472,6 +1181,56 @@
           "title": {
             "zh": "矩形十字辅助线",
             "en": "Rectangular Crosshair"
+          },
+          "meta": {
+            "title": "Rectangular Crosshair",
+            "keywords": "lineChart, comparison, trend, line, crosshair",
+            "category": "demo",
+            "group": "crosshair",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/crosshair/rect.png",
+            "link": "",
+            "option": "lineChart#crosshair"
+          }
+        }
+      ]
+    },
+    {
+      "path": "custom",
+      "title": {
+        "zh": "custom",
+        "en": "custom"
+      },
+      "children": [
+        {
+          "path": "mark",
+          "title": {
+            "zh": "自定义 mark",
+            "en": "Custom Mark"
+          },
+          "meta": {
+            "title": "Custom Mark",
+            "keywords": "customMark",
+            "category": "examples",
+            "group": "customMark",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/57a706137957fce7388f3ab00.png",
+            "link": "",
+            "option": "barChart#customMark"
+          }
+        },
+        {
+          "path": "series-extension",
+          "title": {
+            "zh": "自定义 symbol mark",
+            "en": "Custom Symbol Mark"
+          },
+          "meta": {
+            "title": "Custom Symbol Mark",
+            "keywords": "customMark",
+            "category": "examples",
+            "group": "customMark",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/custom/series-extension.png",
+            "link": "",
+            "option": "barChart#customMark"
           }
         }
       ]
@@ -488,6 +1247,15 @@
           "title": {
             "zh": "基础数据使用",
             "en": "Basic Data Usage"
+          },
+          "meta": {
+            "title": "Basic Data Usage",
+            "keywords": "data",
+            "category": "demo",
+            "group": "data",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/data/basic-data.png",
+            "link": "",
+            "option": "lineChart#data"
           }
         },
         {
@@ -495,6 +1263,15 @@
           "title": {
             "zh": "数据别名",
             "en": "Data Alias"
+          },
+          "meta": {
+            "title": "Data Alias",
+            "keywords": "data,alias",
+            "category": "demo",
+            "group": "data",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/data/data-fields-alias.png",
+            "link": "",
+            "option": "lineChart#data"
           }
         },
         {
@@ -502,6 +1279,15 @@
           "title": {
             "zh": "按照domain进行数据筛选",
             "en": "Data Filtering By Domain"
+          },
+          "meta": {
+            "title": "Data Filtering By Domain",
+            "keywords": "data,filter",
+            "category": "demo",
+            "group": "data",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/data/data-fields-domain.png",
+            "link": "",
+            "option": "scatterChart#data"
           }
         },
         {
@@ -509,6 +1295,15 @@
           "title": {
             "zh": "数据排序",
             "en": "Data Sorting"
+          },
+          "meta": {
+            "title": "Data Sorting",
+            "keywords": "data,sort",
+            "category": "demo",
+            "group": "data",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/data/data-fields-sort.png",
+            "link": "",
+            "option": "barChart#data"
           }
         },
         {
@@ -516,6 +1311,15 @@
           "title": {
             "zh": "数据筛选",
             "en": "Data Filtering"
+          },
+          "meta": {
+            "title": "Data Filtering",
+            "keywords": "data,filter",
+            "category": "demo",
+            "group": "data",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/data/data-filter.png",
+            "link": "",
+            "option": "scatterChart#data"
           }
         }
       ]
@@ -532,6 +1336,15 @@
           "title": {
             "zh": "缩略轴控制极坐标系图表",
             "en": "Thumbnail Axis Controls Polar Chart"
+          },
+          "meta": {
+            "title": "Thumbnail Axis Controls Polar Chart",
+            "keywords": "polarChart,dataZoom",
+            "category": "demo",
+            "group": "data-zoom",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/data-zoom/data-zoom-polar.png",
+            "link": "",
+            "option": "radarChart#dataZoom"
           }
         },
         {
@@ -539,6 +1352,15 @@
           "title": {
             "zh": "轴缩放模式",
             "en": "Axis Zoom Mode"
+          },
+          "meta": {
+            "title": "Axis Zoom Mode",
+            "keywords": "scatterChart, dataZoom, scatter",
+            "category": "demo",
+            "group": "data-zoom",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/data-zoom/filter-mode-axis.png",
+            "link": "",
+            "option": "commonChart#dataZoom"
           }
         },
         {
@@ -546,6 +1368,15 @@
           "title": {
             "zh": "缩略轴预览图表样式配置",
             "en": "Thumbnail Axis Preview Chart Style Configuration"
+          },
+          "meta": {
+            "title": "Thumbnail Axis Preview Chart Style Configuration",
+            "keywords": "barChart,dataZoom",
+            "category": "demo",
+            "group": "axis",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/data-zoom/preview-data.png",
+            "link": "",
+            "option": "barChart#dataZoom"
           }
         },
         {
@@ -553,6 +1384,15 @@
           "title": {
             "zh": "缩略轴以数据的方式定义初始范围",
             "en": "Define initial range in data form with thumbnail axis"
+          },
+          "meta": {
+            "title": "Define initial range in data form with thumbnail axis",
+            "keywords": "rangeColumnChart, dataZoom",
+            "category": "demo",
+            "group": "data-zoom",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/data-zoom/state-with-data.png",
+            "link": "",
+            "option": "rangeColumnChart#dataZoom"
           }
         }
       ]
@@ -569,6 +1409,15 @@
           "title": {
             "zh": "基础漏斗图",
             "en": "Basic Funnel Chart"
+          },
+          "meta": {
+            "title": "Basic Funnel Chart",
+            "keywords": "funnelChart,composition,trend,triangle",
+            "category": "examples",
+            "group": "funnel chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/funnel-chart/basic-funnel.png",
+            "link": "",
+            "option": "funnelChart"
           }
         },
         {
@@ -576,6 +1425,31 @@
           "title": {
             "zh": "自定义漏斗图",
             "en": "Custom Funnel Chart"
+          },
+          "meta": {
+            "title": "Custom Funnel Chart",
+            "keywords": "funnelChart,composition,trend,custom",
+            "category": "examples",
+            "group": "funnel chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/funnel-chart/custom-funnel.png",
+            "link": "",
+            "option": "funnelChart"
+          }
+        },
+        {
+          "path": "rect-funnel",
+          "title": {
+            "zh": "矩形转化漏斗图",
+            "en": "Rectangular Conversion Funnel Chart"
+          },
+          "meta": {
+            "title": "Rectangular Conversion Funnel Chart",
+            "keywords": "funnelChart, composition, trend, strip",
+            "category": "examples",
+            "group": "funnel chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/ffc3a9b5518762d274121ff04.png",
+            "link": "",
+            "option": "funnelChart"
           }
         },
         {
@@ -583,13 +1457,88 @@
           "title": {
             "zh": "转化漏斗图",
             "en": "Conversion Funnel Chart"
+          },
+          "meta": {
+            "title": "Conversion Funnel Chart",
+            "keywords": "funnelChart,composition,trend,triangle",
+            "category": "examples",
+            "group": "funnel chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/funnel-chart/transform-funnel.png",
+            "link": "",
+            "option": "funnelChart"
+          }
+        }
+      ]
+    },
+    {
+      "path": "gauge-chart",
+      "title": {
+        "zh": "gauge-chart",
+        "en": "gauge-chart"
+      },
+      "children": [
+        {
+          "path": "basic-gauge",
+          "title": {
+            "zh": "基础仪表图",
+            "en": "Basic Gauge Chart"
+          },
+          "meta": {
+            "title": "Basic Gauge Chart",
+            "keywords": "gauge,comparison,circle",
+            "category": "examples",
+            "group": "gauge",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/gauge-chart/basic-gauge.png",
+            "link": "",
+            "option": "gaugeChart"
           }
         },
         {
-          "path": "rect-funnel",
+          "path": "clock",
           "title": {
-            "zh": "矩形转化漏斗图",
-            "en": "Rectangular Conversion Funnel Chart"
+            "zh": "时钟示例",
+            "en": "Clock Example"
+          },
+          "meta": {
+            "title": "Clock Example",
+            "keywords": "gauge,comparison,circle,indicator",
+            "category": "examples",
+            "group": "gauge",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/gauge-chart/clock.gif",
+            "link": "",
+            "option": "gaugeChart"
+          }
+        },
+        {
+          "path": "gauge-gradient",
+          "title": {
+            "zh": "渐变仪表图",
+            "en": "Gradient Gauge Chart"
+          },
+          "meta": {
+            "title": "Gradient Gauge Chart",
+            "keywords": "gauge,comparison,circle",
+            "category": "examples",
+            "group": "gauge",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/gauge-chart/gauge-gradient.png",
+            "link": "",
+            "option": "gaugeChart"
+          }
+        },
+        {
+          "path": "gauge-progress",
+          "title": {
+            "zh": "使用circularProgress声明仪表图",
+            "en": "使用circularProgress声明仪表图"
+          },
+          "meta": {
+            "title": "使用circularProgress声明仪表图",
+            "keywords": "gauge,comparison,circle",
+            "category": "examples",
+            "group": "gauge",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/57a706137957fce7388f3ab0b.png",
+            "link": "",
+            "option": "gaugeChart"
           }
         }
       ]
@@ -606,6 +1555,15 @@
           "title": {
             "zh": "渐变面积图",
             "en": "Gradient Area Chart"
+          },
+          "meta": {
+            "title": "Gradient Area Chart",
+            "keywords": "areaChart, comparison, trend, area, gradient",
+            "category": "demo",
+            "group": "gradient",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/gradient/area.png",
+            "link": "",
+            "option": "areaChart"
           }
         },
         {
@@ -613,6 +1571,15 @@
           "title": {
             "zh": "渐变色-高度渐变",
             "en": "Gradient Color - Height Gradient"
+          },
+          "meta": {
+            "title": "Gradient Color - Height Gradient",
+            "keywords": "barChart,comparison,rectangle,gradient,distribution,rank",
+            "category": "demo",
+            "group": "gradient",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/gradient/bar.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -620,6 +1587,15 @@
           "title": {
             "zh": "渐变色-颜色划分移动端",
             "en": "Gradient Color - Color Segmentation on Mobile"
+          },
+          "meta": {
+            "title": "Gradient Color - Color Segmentation on Mobile",
+            "keywords": "lineChart,comparison,trend,line,gradient",
+            "category": "demo",
+            "group": "gradient",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/gradient/enhancement-gradient-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -627,6 +1603,15 @@
           "title": {
             "zh": "渐变折线图",
             "en": "Gradient Line Chart"
+          },
+          "meta": {
+            "title": "Gradient Line Chart",
+            "keywords": "lineChart, comparison, trend, line, gradient",
+            "category": "demo",
+            "group": "gradient",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/gradient/line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -634,6 +1619,40 @@
           "title": {
             "zh": "渐变气泡图",
             "en": "Gradient Bubble Chart"
+          },
+          "meta": {
+            "title": "Gradient Bubble Chart",
+            "keywords": "scatterChart,comparison,distribution,scatter,gradient",
+            "category": "demo",
+            "group": "gradient",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/gradient/scatter.png",
+            "link": "",
+            "option": "scatterChart"
+          }
+        }
+      ]
+    },
+    {
+      "path": "heatmap-chart",
+      "title": {
+        "zh": "heatmap-chart",
+        "en": "heatmap-chart"
+      },
+      "children": [
+        {
+          "path": "basic-heatmap",
+          "title": {
+            "zh": "基础热力图",
+            "en": "Basic Heatmap"
+          },
+          "meta": {
+            "title": "Basic Heatmap",
+            "keywords": "heatmap,relationship,rectangle,comparison,distribution,trend",
+            "category": "examples",
+            "group": "heatmap chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/heatmap-chart/basic-heatmap.png",
+            "link": "",
+            "option": "heatmapChart"
           }
         }
       ]
@@ -650,6 +1669,15 @@
           "title": {
             "zh": "基础直方图",
             "en": "Basic Histogram"
+          },
+          "meta": {
+            "title": "Basic Histogram",
+            "keywords": "histogram,distribution,rectangle",
+            "category": "examples",
+            "group": "histogram chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/histogram-chart/histogram-basis.png",
+            "link": "",
+            "option": "histogramChart"
           }
         },
         {
@@ -657,6 +1685,31 @@
           "title": {
             "zh": "不同区间分布直方图",
             "en": "Histogram with Different Bin Ranges"
+          },
+          "meta": {
+            "title": "Histogram with Different Bin Ranges",
+            "keywords": "histogram,distribution,rectangle",
+            "category": "examples",
+            "group": "histogram chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/histogram-chart/histogram-different-bin.png",
+            "link": "",
+            "option": "histogramChart"
+          }
+        },
+        {
+          "path": "histogram-stack-h",
+          "title": {
+            "zh": "水平堆叠直方图",
+            "en": "Horizontal Stacked Histogram"
+          },
+          "meta": {
+            "title": "Horizontal Stacked Histogram",
+            "keywords": "histogram,distribution,rectangle,composition",
+            "category": "examples",
+            "group": "histogram chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/histogram-chart/histogram-stack-h.png",
+            "link": "",
+            "option": "histogramChart"
           }
         },
         {
@@ -664,13 +1717,113 @@
           "title": {
             "zh": "堆叠直方图",
             "en": "Stacked Histogram"
+          },
+          "meta": {
+            "title": "Stacked Histogram",
+            "keywords": "histogram, distribution, rectangle, composition",
+            "category": "examples",
+            "group": "histogram chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/histogram-chart/histogram-stack.png",
+            "link": "",
+            "option": "histogramChart"
+          }
+        }
+      ]
+    },
+    {
+      "path": "label",
+      "title": {
+        "zh": "label",
+        "en": "label"
+      },
+      "children": [
+        {
+          "path": "bar-label",
+          "title": {
+            "zh": "柱状图标签",
+            "en": "Bar Chart Labels"
+          },
+          "meta": {
+            "title": "Bar Chart Labels",
+            "keywords": "label",
+            "category": "examples",
+            "group": "label",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/label/bar-label.png",
+            "link": "",
+            "option": "barChart#label"
           }
         },
         {
-          "path": "histogram-stack-h",
+          "path": "combination-chart-label",
           "title": {
-            "zh": "水平堆叠直方图",
-            "en": "Horizontal Stacked Histogram"
+            "zh": "组合图标签",
+            "en": "Combination Chart Labels"
+          },
+          "meta": {
+            "title": "Combination Chart Labels",
+            "keywords": "label",
+            "category": "examples",
+            "group": "label",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/label/combination-chart-label.png",
+            "link": "",
+            "option": "commonChart#series-line.label"
+          }
+        },
+        {
+          "path": "line-label",
+          "title": {
+            "zh": "折线图标签",
+            "en": "Line Chart Labels"
+          },
+          "meta": {
+            "title": "Line Chart Labels",
+            "keywords": "label",
+            "category": "examples",
+            "group": "label",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/label/line-label.png",
+            "link": "",
+            "option": "lineChart#label"
+          }
+        }
+      ]
+    },
+    {
+      "path": "layout",
+      "title": {
+        "zh": "layout",
+        "en": "layout"
+      },
+      "children": [
+        {
+          "path": "custom-layout",
+          "title": {
+            "zh": "自定义布局",
+            "en": "Custom Layout"
+          },
+          "meta": {
+            "title": "Custom Layout",
+            "keywords": "",
+            "category": "examples",
+            "group": "layout",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/7b82fb013e7c6319c065b3d01.png",
+            "link": "",
+            "option": "commonChart#layout"
+          }
+        },
+        {
+          "path": "grid-layout",
+          "title": {
+            "zh": "行列布局",
+            "en": "Row and Column Layout"
+          },
+          "meta": {
+            "title": "Row and Column Layout",
+            "keywords": "",
+            "category": "examples",
+            "group": "layout",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/layout/grid-layout.png",
+            "link": "",
+            "option": "commonChart#layout"
           }
         }
       ]
@@ -687,6 +1840,15 @@
           "title": {
             "zh": "连续图例",
             "en": "Continuous Legend"
+          },
+          "meta": {
+            "title": "Continuous Legend",
+            "keywords": "scatterChart,comparison,distribution,scatter,legend",
+            "category": "demo",
+            "group": "legend",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/legend/continuous.png",
+            "link": "",
+            "option": "scatterChart#legends"
           }
         },
         {
@@ -694,6 +1856,15 @@
           "title": {
             "zh": "自定义图例项",
             "en": "Custom Legend Item"
+          },
+          "meta": {
+            "title": "Custom Legend Item",
+            "keywords": "pieChart,legend,circle,comparison,proportion,composition",
+            "category": "demo",
+            "group": "legend",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/legend/custom-data.png",
+            "link": "",
+            "option": "pieChart#legends"
           }
         },
         {
@@ -701,6 +1872,15 @@
           "title": {
             "zh": "自定义图例交互",
             "en": "Custom Legend Interaction"
+          },
+          "meta": {
+            "title": "Custom Legend Interaction",
+            "keywords": "barChart,comparison,rectangle,legend,distribution,rank",
+            "category": "demo",
+            "group": "legend",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/legend/custom-interaction.png",
+            "link": "",
+            "option": "barChart#legends"
           }
         },
         {
@@ -708,6 +1888,15 @@
           "title": {
             "zh": "图例项平铺",
             "en": "Tiled Legend Items"
+          },
+          "meta": {
+            "title": "Tiled Legend Items",
+            "keywords": "lineChart,comparison,trend,line,legend",
+            "category": "demo",
+            "group": "legend",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/legend/custom-line-legend.png",
+            "link": "",
+            "option": "lineChart#legends"
           }
         },
         {
@@ -715,6 +1904,15 @@
           "title": {
             "zh": "自定义图例 UI",
             "en": "Custom Legend UI"
+          },
+          "meta": {
+            "title": "Custom Legend UI",
+            "keywords": "barChart, comparison, rectangle, legend, distribution, rank, composition",
+            "category": "demo",
+            "group": "legend",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/legend/custom-ui.png",
+            "link": "",
+            "option": "barChart#legends"
           }
         },
         {
@@ -722,6 +1920,15 @@
           "title": {
             "zh": "图例展示在图表内部",
             "en": "Legend Displayed Inside the Chart"
+          },
+          "meta": {
+            "title": "Legend Displayed Inside the Chart",
+            "keywords": "barChart,comparison,rectangle,legend",
+            "category": "demo",
+            "group": "legend",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/legend/float.png",
+            "link": "",
+            "option": "barChart#legends"
           }
         },
         {
@@ -729,6 +1936,15 @@
           "title": {
             "zh": "聚焦模式",
             "en": "Focus Mode"
+          },
+          "meta": {
+            "title": "Focus Mode",
+            "keywords": "barChart,comparison,rectangle,legend,distribution,rank",
+            "category": "demo",
+            "group": "legend",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/legend/focus.png",
+            "link": "",
+            "option": "barChart#legends"
           }
         },
         {
@@ -736,6 +1952,15 @@
           "title": {
             "zh": "多图例/混合图例",
             "en": "Multiple Legends/Mixed Legends"
+          },
+          "meta": {
+            "title": "Multiple Legends/Mixed Legends",
+            "keywords": "scatterChart,comparison,distribution,scatter,legend",
+            "category": "demo",
+            "group": "legend",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/legend/multiple-legends.png",
+            "link": "",
+            "option": "scatterChart#legends"
           }
         },
         {
@@ -743,6 +1968,15 @@
           "title": {
             "zh": "单选模式",
             "en": "Single Selection Mode"
+          },
+          "meta": {
+            "title": "Single Selection Mode",
+            "keywords": "lineChart,comparison,trend,line,legend",
+            "category": "demo",
+            "group": "legend",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/legend/single-select.png",
+            "link": "",
+            "option": "lineChart#legends"
           }
         }
       ]
@@ -759,6 +1993,15 @@
           "title": {
             "zh": "基础折线图",
             "en": "Basic line chart"
+          },
+          "meta": {
+            "title": "Basic line chart",
+            "keywords": "lineChart,comparison,trend,line",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/basic-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -766,6 +2009,15 @@
           "title": {
             "zh": "末尾虚线",
             "en": "Dashed Line at the End"
+          },
+          "meta": {
+            "title": "Dashed Line at the End",
+            "keywords": "lineChart, comparison, trend, line",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/dash-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -773,6 +2025,31 @@
           "title": {
             "zh": "垂直折线图",
             "en": "Horizontal Line Chart"
+          },
+          "meta": {
+            "title": "Horizontal Line Chart",
+            "keywords": "lineChart,comparison,trend,line",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/horizontal-line.png",
+            "link": "",
+            "option": "lineChart"
+          }
+        },
+        {
+          "path": "line-axes-padding",
+          "title": {
+            "zh": "折线图轴 padding 调整",
+            "en": "Offline Chart Axis padding adjustment"
+          },
+          "meta": {
+            "title": "Offline Chart Axis padding adjustment",
+            "keywords": "lineChart,comparison,trend,line",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/line-axes-padding.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -780,6 +2057,15 @@
           "title": {
             "zh": "多系列折线图",
             "en": "Multi-series Line Chart"
+          },
+          "meta": {
+            "title": "Multi-series Line Chart",
+            "keywords": "lineChart,comparison,trend,line",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/multi-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -787,6 +2073,15 @@
           "title": {
             "zh": "存在空值折线图",
             "en": "Line Chart with Null Values"
+          },
+          "meta": {
+            "title": "Line Chart with Null Values",
+            "keywords": "lineChart,comparison,trend,line",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/null-value-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -794,6 +2089,15 @@
           "title": {
             "zh": "百分比堆叠折线图",
             "en": "Percentage Stacked Line Chart"
+          },
+          "meta": {
+            "title": "Percentage Stacked Line Chart",
+            "keywords": "lineChart,comparison,trend,line,composition,proportion",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/percentage-stacked-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -801,6 +2105,15 @@
           "title": {
             "zh": "平滑折线图",
             "en": "Smooth Line Chart"
+          },
+          "meta": {
+            "title": "Smooth Line Chart",
+            "keywords": "lineChart,comparison,trend,line",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/smoothed-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -808,6 +2121,15 @@
           "title": {
             "zh": "堆叠折线图",
             "en": "Stacked Line Chart"
+          },
+          "meta": {
+            "title": "Stacked Line Chart",
+            "keywords": "lineChart,comparison,trend,line,composition",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/stacked-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -815,6 +2137,15 @@
           "title": {
             "zh": "阶梯折线图",
             "en": "Step Line Chart"
+          },
+          "meta": {
+            "title": "Step Line Chart",
+            "keywords": "lineChart,comparison,trend,line",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/step-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         },
         {
@@ -822,17 +2153,27 @@
           "title": {
             "zh": "非堆叠折线图",
             "en": "Unstacked Line Chart"
-          }
-        },
-        {
-          "path": "line-axes-padding",
-          "title": {
-            "zh": "折线图轴 padding 调整",
-            "en": "Offline Chart Axis padding adjustment"
+          },
+          "meta": {
+            "title": "Unstacked Line Chart",
+            "keywords": "lineChart,comparison,trend,line",
+            "category": "examples",
+            "group": "line chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/line-chart/unstacked-line.png",
+            "link": "",
+            "option": "lineChart"
           }
         }
       ]
     },
+    {
+      "path": "log",
+      "title": {
+        "zh": "log",
+        "en": "log"
+      },
+      "children": []
+    },
     {
       "path": "map-chart",
       "title": {
@@ -845,6 +2186,15 @@
           "title": {
             "zh": "基础地图",
             "en": "Basic Map"
+          },
+          "meta": {
+            "title": "Basic Map",
+            "keywords": "map,space,polygon",
+            "category": "examples",
+            "group": "map chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/map-chart/basic-map.png",
+            "link": "",
+            "option": "mapChart"
           }
         },
         {
@@ -852,6 +2202,15 @@
           "title": {
             "zh": "散点地图",
             "en": "Scatter Map"
+          },
+          "meta": {
+            "title": "Scatter Map",
+            "keywords": "map,space,polygon,scatter,distribution,comparison",
+            "category": "examples",
+            "group": "map chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/map-chart/scatter-map.png",
+            "link": "",
+            "option": "mapChart"
           }
         }
       ]
@@ -863,11 +2222,36 @@
         "en": "marker"
       },
       "children": [
+        {
+          "path": "mark-area-basic",
+          "title": {
+            "zh": "markArea",
+            "en": "markArea"
+          },
+          "meta": {
+            "title": "markArea",
+            "keywords": "marker, lineChart",
+            "category": "examples",
+            "group": "marker",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/7b82fb013e7c6319c065b3d00.png",
+            "link": "",
+            "option": "lineChart#markArea"
+          }
+        },
         {
           "path": "mark-area-multi",
           "title": {
             "zh": "markArea 轴空间 和 数据点定位",
             "en": "markArea Axis Space and Data Point Positioning"
+          },
+          "meta": {
+            "title": "markArea Axis Space and Data Point Positioning",
+            "keywords": "marker, areaChart",
+            "category": "examples",
+            "group": "marker",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/marker/mark-area-multi.png",
+            "link": "",
+            "option": "lineChart#markArea"
           }
         },
         {
@@ -875,6 +2259,15 @@
           "title": {
             "zh": "markArea 模拟象限图",
             "en": "markArea Quadrant Chart Simulation"
+          },
+          "meta": {
+            "title": "markArea Quadrant Chart Simulation",
+            "keywords": "marker,scatterChart,scatter",
+            "category": "examples",
+            "group": "marker",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/marker/mark-area-quadrant.png",
+            "link": "",
+            "option": "scatterChart#markArea"
           }
         },
         {
@@ -882,6 +2275,31 @@
           "title": {
             "zh": "markLine 轴空间定位",
             "en": "markLine Axis Space Positioning"
+          },
+          "meta": {
+            "title": "markLine Axis Space Positioning",
+            "keywords": "lineChart,marker",
+            "category": "examples",
+            "group": "marker",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/marker/mark-line-axis.png",
+            "link": "",
+            "option": "lineChart#markLine"
+          }
+        },
+        {
+          "path": "mark-line-basic",
+          "title": {
+            "zh": "markLine",
+            "en": "markLine"
+          },
+          "meta": {
+            "title": "markLine",
+            "keywords": "marker,lineChart",
+            "category": "examples",
+            "group": "marker",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/4f62a673241122408f7245400.png",
+            "link": "",
+            "option": "scatterChart#markLine"
           }
         },
         {
@@ -889,6 +2307,15 @@
           "title": {
             "zh": "markLine 数据高亮",
             "en": "markLine Data Highlighting"
+          },
+          "meta": {
+            "title": "markLine Data Highlighting",
+            "keywords": "lineChart,marker",
+            "category": "examples",
+            "group": "marker",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/marker/mark-line-coordinates.png",
+            "link": "",
+            "option": "lineChart#markLine"
           }
         },
         {
@@ -896,6 +2323,15 @@
           "title": {
             "zh": "markLine 指定数据点并计算线性回归",
             "en": "markLine Specifying Data Points and Calculating Linear Regression"
+          },
+          "meta": {
+            "title": "markLine Specifying Data Points and Calculating Linear Regression",
+            "keywords": "marker, commonChart",
+            "category": "examples",
+            "group": "marker",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/marker/mark-line-part-regression.png",
+            "link": "",
+            "option": "barChart#markLine"
           }
         },
         {
@@ -903,6 +2339,15 @@
           "title": {
             "zh": "markLine 指定关联系列数据点",
             "en": "markLine Specifying Related Series Data Points"
+          },
+          "meta": {
+            "title": "markLine Specifying Related Series Data Points",
+            "keywords": "marker,commonChart",
+            "category": "examples",
+            "group": "marker",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/marker/mark-line-ref-series.png",
+            "link": "",
+            "option": "commonChart#markLine"
           }
         },
         {
@@ -910,20 +2355,56 @@
           "title": {
             "zh": "markPoint 数据点定位",
             "en": "markPoint Data Point Positioning"
+          },
+          "meta": {
+            "title": "markPoint Data Point Positioning",
+            "keywords": "marker, lineChart",
+            "category": "examples",
+            "group": "marker",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/marker/mark-point-basic.png",
+            "link": "",
+            "option": "lineChart#markPoint"
           }
-        },
+        }
+      ]
+    },
+    {
+      "path": "morphing",
+      "title": {
+        "zh": "morphing",
+        "en": "morphing"
+      },
+      "children": [
         {
-          "path": "mark-area-basic",
+          "path": "bar-to-pie",
           "title": {
-            "zh": "markArea",
-            "en": "markArea"
+            "zh": "柱状图、饼图间切换的全局动画",
+            "en": "Global animation for switching between bar and pie charts"
+          },
+          "meta": {
+            "title": "Global animation for switching between bar and pie charts",
+            "keywords": "animation,morphing,bar,pie,barChart,pieChart,comparison",
+            "category": "examples",
+            "group": "morphing",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/morph-bar-to-pie.gif",
+            "link": "",
+            "option": "pieChart#animationUpdate"
           }
         },
         {
-          "path": "mark-line-basic",
+          "path": "bar-to-scatter",
           "title": {
-            "zh": "markLine",
-            "en": "markLine"
+            "zh": "柱状图、散点图间切换的全局动画",
+            "en": "Global animation for switching between bar charts and scatter plots"
+          },
+          "meta": {
+            "title": "Global animation for switching between bar charts and scatter plots",
+            "keywords": "animation,morphing,bar,scatter,barChart,scatterChart",
+            "category": "examples",
+            "group": "morphing",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/morph-bar-to-scatter.gif",
+            "link": "",
+            "option": "commonChart#series-bar.animationUpdate"
           }
         }
       ]
@@ -940,6 +2421,15 @@
           "title": {
             "zh": "带纹理的分组柱状图",
             "en": "Grouped Bar Chart with Textures"
+          },
+          "meta": {
+            "title": "Grouped Bar Chart with Textures",
+            "keywords": "barChart,comparison,distribution,rank,pattern,label,rectangle",
+            "category": "examples",
+            "group": "pattern",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/pattern/accessible-column.png",
+            "link": "",
+            "option": "barChart"
           }
         },
         {
@@ -947,6 +2437,15 @@
           "title": {
             "zh": "带纹理的饼图",
             "en": "Pie Chart with Texture"
+          },
+          "meta": {
+            "title": "Pie Chart with Texture",
+            "keywords": "pieChart,comparison,proportion,composition,pattern,label,circle",
+            "category": "examples",
+            "group": "pattern",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/pattern/accessible-pie.png",
+            "link": "",
+            "option": "pieChart"
           }
         },
         {
@@ -954,6 +2453,120 @@
           "title": {
             "zh": "末尾虚线堆叠面积图",
             "en": "Dashed Stacked Area Chart with Distinguished End"
+          },
+          "meta": {
+            "title": "Dashed Stacked Area Chart with Distinguished End",
+            "keywords": "areaChart,comparison,trend,composition,pattern,label,area",
+            "category": "examples",
+            "group": "area chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/ffc3a9b5518762d274121ff00.png",
+            "link": "",
+            "option": "areaChart"
+          }
+        }
+      ]
+    },
+    {
+      "path": "pie-chart",
+      "title": {
+        "zh": "pie-chart",
+        "en": "pie-chart"
+      },
+      "children": [
+        {
+          "path": "basic-pie",
+          "title": {
+            "zh": "基础饼图",
+            "en": "Basic Pie Chart"
+          },
+          "meta": {
+            "title": "Basic Pie Chart",
+            "keywords": "pieChart,comparison,composition,proportion,circle",
+            "category": "examples",
+            "group": "pie",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c81707.png",
+            "link": "",
+            "option": "pieChart"
+          }
+        },
+        {
+          "path": "nested-pie",
+          "title": {
+            "zh": "嵌套饼图",
+            "en": "Nested Pie Chart"
+          },
+          "meta": {
+            "title": "Nested Pie Chart",
+            "keywords": "pieChart, comparison, composition, proportion, circle",
+            "category": "examples",
+            "group": "pie",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c81708.png",
+            "link": "",
+            "option": "pieChart"
+          }
+        },
+        {
+          "path": "pie-indicator",
+          "title": {
+            "zh": "带指标卡饼图",
+            "en": "Pie Chart with Indicator Card"
+          },
+          "meta": {
+            "title": "Pie Chart with Indicator Card",
+            "keywords": "pieChart, comparison, composition, proportion, circle, indicator",
+            "category": "examples",
+            "group": "pie",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c81709.png",
+            "link": "",
+            "option": "pieChart"
+          }
+        },
+        {
+          "path": "pie-label",
+          "title": {
+            "zh": "饼图标签布局",
+            "en": "Pie Chart Label Layout"
+          },
+          "meta": {
+            "title": "Pie Chart Label Layout",
+            "keywords": "pieChart,comparison,composition,proportion,circle,label",
+            "category": "examples",
+            "group": "pie",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/pie-chart/pie-label.png",
+            "link": "",
+            "option": "pieChart"
+          }
+        },
+        {
+          "path": "radius-scale-pie",
+          "title": {
+            "zh": "半径可映射饼图",
+            "en": "Radius mappable pie chart"
+          },
+          "meta": {
+            "title": "Radius mappable pie chart",
+            "keywords": "",
+            "category": "examples",
+            "group": "pie",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c8170a.png",
+            "link": "",
+            "option": "pieChart"
+          }
+        },
+        {
+          "path": "ring",
+          "title": {
+            "zh": "环图",
+            "en": "Ring Chart"
+          },
+          "meta": {
+            "title": "Ring Chart",
+            "keywords": "pieChart,comparison,composition,proportion,circle",
+            "category": "examples",
+            "group": "pie",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c8170b.png",
+            "link": "",
+            "option": "pieChart"
           }
         }
       ]
@@ -970,6 +2583,15 @@
           "title": {
             "zh": "基础播放器",
             "en": "Basic Player"
+          },
+          "meta": {
+            "title": "Basic Player",
+            "keywords": "player",
+            "category": "examples",
+            "group": "player",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/player/basic-player.gif",
+            "link": "",
+            "option": "pieChart#player"
           }
         },
         {
@@ -977,6 +2599,104 @@
           "title": {
             "zh": "连续播放器",
             "en": "Continuous Player"
+          },
+          "meta": {
+            "title": "Continuous Player",
+            "keywords": "player",
+            "category": "examples",
+            "group": "player",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/player/continuous-player.gif",
+            "link": "",
+            "option": "pieChart#player"
+          }
+        }
+      ]
+    },
+    {
+      "path": "preview-image",
+      "title": {
+        "zh": "preview-image",
+        "en": "preview-image"
+      },
+      "children": []
+    },
+    {
+      "path": "preview-image-temp",
+      "title": {
+        "zh": "preview-image-temp",
+        "en": "preview-image-temp"
+      },
+      "children": []
+    },
+    {
+      "path": "progress",
+      "title": {
+        "zh": "progress",
+        "en": "progress"
+      },
+      "children": [
+        {
+          "path": "circular-progress",
+          "title": {
+            "zh": "环形进度图",
+            "en": "Circular Progress Chart"
+          },
+          "meta": {
+            "title": "Circular Progress Chart",
+            "keywords": "circularProgress,comparison,circle,indicator",
+            "category": "examples",
+            "group": "progress",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/progress/circular-progress.png",
+            "link": "",
+            "option": "circularProgressChart"
+          }
+        },
+        {
+          "path": "linear-progress-with-text",
+          "title": {
+            "zh": "带文本标注的条形进度图",
+            "en": "Bar chart with text labeling"
+          },
+          "meta": {
+            "title": "Bar chart with text labeling",
+            "keywords": "linearProgress,comparison,rectangle",
+            "category": "examples",
+            "group": "progress",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/progress-linear-progress-with-text.png",
+            "link": "",
+            "option": "linearProgressChart"
+          }
+        },
+        {
+          "path": "linear-progress",
+          "title": {
+            "zh": "条形进度图",
+            "en": "Bar Progress Chart"
+          },
+          "meta": {
+            "title": "Bar Progress Chart",
+            "keywords": "linearProgress, comparison, rectangle",
+            "category": "examples",
+            "group": "progress",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c81702.png",
+            "link": "",
+            "option": "linearProgressChart"
+          }
+        },
+        {
+          "path": "segment-linear-progress",
+          "title": {
+            "zh": "分段条形进度图",
+            "en": "Segmented Bar Progress Chart"
+          },
+          "meta": {
+            "title": "Segmented Bar Progress Chart",
+            "keywords": "linearProgress,comparison,rectangle",
+            "category": "examples",
+            "group": "progress",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/progress-segment-linear-progress.png",
+            "link": "",
+            "option": "linearProgressChart"
           }
         }
       ]
@@ -993,6 +2713,15 @@
           "title": {
             "zh": "基础雷达图",
             "en": "Basic Radar Chart"
+          },
+          "meta": {
+            "title": "Basic Radar Chart",
+            "keywords": "radarChart,comparison,line,circle",
+            "category": "examples",
+            "group": "radar chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c8170c.png",
+            "link": "",
+            "option": "radarChart"
           }
         },
         {
@@ -1000,6 +2729,15 @@
           "title": {
             "zh": "分组雷达图",
             "en": "Grouped Radar Chart"
+          },
+          "meta": {
+            "title": "Grouped Radar Chart",
+            "keywords": "radarChart,comparison,line,circle,axis",
+            "category": "examples",
+            "group": "radar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/radar-chart/multiple-radar.png",
+            "link": "",
+            "option": "radarChart"
           }
         },
         {
@@ -1007,6 +2745,15 @@
           "title": {
             "zh": "空心雷达图",
             "en": "Hollow Radar Chart"
+          },
+          "meta": {
+            "title": "Hollow Radar Chart",
+            "keywords": "radarChart,comparison,line,circle,axis,label,indicator",
+            "category": "examples",
+            "group": "radar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/radar-chart/radar-with-innerRadius.png",
+            "link": "",
+            "option": "radarChart"
           }
         },
         {
@@ -1014,6 +2761,15 @@
           "title": {
             "zh": "百分比堆叠雷达图",
             "en": "Percentage Stacked Radar Chart"
+          },
+          "meta": {
+            "title": "Percentage Stacked Radar Chart",
+            "keywords": "radarChart,comparison,line,circle,axis",
+            "category": "examples",
+            "group": "radar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/radar-chart/stack-percent-radar.png",
+            "link": "",
+            "option": "radarChart"
           }
         },
         {
@@ -1021,6 +2777,15 @@
           "title": {
             "zh": "堆叠雷达图",
             "en": "Stacked Radar Chart"
+          },
+          "meta": {
+            "title": "Stacked Radar Chart",
+            "keywords": "radarChart,comparison,line,circle,axis",
+            "category": "examples",
+            "group": "radar chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/radar-chart/stack-radar.png",
+            "link": "",
+            "option": "radarChart"
           }
         }
       ]
@@ -1037,6 +2802,15 @@
           "title": {
             "zh": "区间条形图",
             "en": "Range Bar Chart"
+          },
+          "meta": {
+            "title": "Range Bar Chart",
+            "keywords": "rangeColumnChart,comparison,rectangle,trend",
+            "category": "examples",
+            "group": "range column chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/range-column-chart/range-bar.png",
+            "link": "",
+            "option": "rangeColumnChart"
           }
         },
         {
@@ -1044,6 +2818,15 @@
           "title": {
             "zh": "区间柱状图",
             "en": "Range Column Chart"
+          },
+          "meta": {
+            "title": "Range Column Chart",
+            "keywords": "rangeColumnChart,comparison,rectangle,trend",
+            "category": "examples",
+            "group": "range column chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/range-column-chart/range-column.png",
+            "link": "",
+            "option": ""
           }
         }
       ]
@@ -1060,6 +2843,15 @@
           "title": {
             "zh": "基础玫瑰图",
             "en": "Basic Rose Chart"
+          },
+          "meta": {
+            "title": "Basic Rose Chart",
+            "keywords": "roseChart,comparison,composition,circle",
+            "category": "examples",
+            "group": "rose",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/rose-chart/basic-rose.png",
+            "link": "",
+            "option": "roseChart"
           }
         },
         {
@@ -1067,20 +2859,47 @@
           "title": {
             "zh": "分组玫瑰图",
             "en": "Grouped Rose Chart"
+          },
+          "meta": {
+            "title": "Grouped Rose Chart",
+            "keywords": "roseChart,comparison,composition,circle",
+            "category": "examples",
+            "group": "rose",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/rose-chart/rose-grouped.png",
+            "link": "",
+            "option": "roseChart"
           }
         },
         {
-          "path": "rose-stacked",
+          "path": "rose-stacked-group",
           "title": {
-            "zh": "堆叠玫瑰图",
-            "en": "Stacked Rose Chart"
+            "zh": "分组堆叠玫瑰图",
+            "en": "Grouped Stacked Rose Chart"
+          },
+          "meta": {
+            "title": "Grouped Stacked Rose Chart",
+            "keywords": "roseChart,comparison,composition,circle",
+            "category": "examples",
+            "group": "rose",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/rose-chart/rose-stacked-group.png",
+            "link": "",
+            "option": "roseChart"
           }
         },
         {
-          "path": "rose-stacked-group",
+          "path": "rose-stacked",
           "title": {
-            "zh": "分组堆叠玫瑰图",
-            "en": "Grouped Stacked Rose Chart"
+            "zh": "堆叠玫瑰图",
+            "en": "Stacked Rose Chart"
+          },
+          "meta": {
+            "title": "Stacked Rose Chart",
+            "keywords": "roseChart,comparison,composition,circle",
+            "category": "examples",
+            "group": "rose",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/rose-chart/rose-stacked.png",
+            "link": "",
+            "option": "roseChart"
           }
         }
       ]
@@ -1097,6 +2916,31 @@
           "title": {
             "zh": "节点左对齐桑基图",
             "en": "Node Left Aligned Sankey Chart"
+          },
+          "meta": {
+            "title": "Node Left Aligned Sankey Chart",
+            "keywords": "sankey,composition,distribution,relationship,comparison,flow",
+            "category": "examples",
+            "group": "sankey chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sankey-chart/align-nodes-left-sankey.png",
+            "link": "",
+            "option": "sankeyChart"
+          }
+        },
+        {
+          "path": "another-data-structure-sankey",
+          "title": {
+            "zh": "桑基图的另一种数据格式",
+            "en": "Another Data Format for Sankey Charts"
+          },
+          "meta": {
+            "title": "Another Data Format for Sankey Charts",
+            "keywords": "sankey,composition,distribution,relationship,comparison,flow",
+            "category": "examples",
+            "group": "sankey chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/57a706137957fce7388f3ab02.png",
+            "link": "",
+            "option": "sankeyChart"
           }
         },
         {
@@ -1104,6 +2948,15 @@
           "title": {
             "zh": "基础桑基图",
             "en": "Basic Sankey Chart"
+          },
+          "meta": {
+            "title": "Basic Sankey Chart",
+            "keywords": "sankey,composition,distribution,relationship,comparison,flow",
+            "category": "examples",
+            "group": "sankey chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/23e5d313c2c3a66d4ca806000.png",
+            "link": "",
+            "option": "sankeyChart"
           }
         },
         {
@@ -1111,6 +2964,15 @@
           "title": {
             "zh": "垂直桑基图",
             "en": "Vertical Sankey Chart"
+          },
+          "meta": {
+            "title": "Vertical Sankey Chart",
+            "keywords": "sankey,composition,distribution,relationship,comparison,flow",
+            "category": "examples",
+            "group": "sankey chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sankey-chart/direction-sankey.png",
+            "link": "",
+            "option": "sankeyChart"
           }
         },
         {
@@ -1118,6 +2980,15 @@
           "title": {
             "zh": "层级桑基图",
             "en": "Hierarchical Sankey Chart"
+          },
+          "meta": {
+            "title": "Hierarchical Sankey Chart",
+            "keywords": "sankey,composition,distribution,relationship,comparison,flow",
+            "category": "examples",
+            "group": "sankey chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sankey-chart/hierarchical-sankey.png",
+            "link": "",
+            "option": "sankeyChart"
           }
         },
         {
@@ -1125,13 +2996,15 @@
           "title": {
             "zh": "交互桑基图",
             "en": "Interactive Sankey Diagram"
-          }
-        },
-        {
-          "path": "another-data-structure-sankey",
-          "title": {
-            "zh": "桑基图的另一种数据格式",
-            "en": "Another Data Format for Sankey Charts"
+          },
+          "meta": {
+            "title": "Interactive Sankey Diagram",
+            "keywords": "sankey,composition,distribution,relationship,comparison,flow",
+            "category": "examples",
+            "group": "sankey chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sankey-chart/interection-sankey.png",
+            "link": "",
+            "option": "sankeyChart"
           }
         },
         {
@@ -1139,6 +3012,15 @@
           "title": {
             "zh": "桑基图多种边配置",
             "en": "Sankey Diagram Multiple Edge Configurations"
+          },
+          "meta": {
+            "title": "Sankey Diagram Multiple Edge Configurations",
+            "keywords": "sankey,composition,distribution,relationship,comparison,flow",
+            "category": "examples",
+            "group": "sankey chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/sankey-chart-d3.jpeg",
+            "link": "",
+            "option": "sankeyChart"
           }
         }
       ]
@@ -1155,6 +3037,15 @@
           "title": {
             "zh": "基础散点图",
             "en": "Basic Scatter Chart"
+          },
+          "meta": {
+            "title": "Basic Scatter Chart",
+            "keywords": "",
+            "category": "examples",
+            "group": "scatter chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/scatter-chart/basic-scatter.png",
+            "link": "",
+            "option": "scatterChart"
           }
         },
         {
@@ -1162,6 +3053,15 @@
           "title": {
             "zh": "气泡散点图",
             "en": "Bubble Scatter Chart"
+          },
+          "meta": {
+            "title": "Bubble Scatter Chart",
+            "keywords": "",
+            "category": "examples",
+            "group": "scatter chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/scatter-chart/bubble-scatter.png",
+            "link": "",
+            "option": "scatterChart"
           }
         },
         {
@@ -1169,6 +3069,15 @@
           "title": {
             "zh": "扰动散点图",
             "en": "Jitter Scatter Plot"
+          },
+          "meta": {
+            "title": "Jitter Scatter Plot",
+            "keywords": "",
+            "category": "examples",
+            "group": "scatter chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/scatter-chart/jitter-scatter.png",
+            "link": "",
+            "option": "scatterChart"
           }
         },
         {
@@ -1176,6 +3085,15 @@
           "title": {
             "zh": "一维散点图",
             "en": "One-Dimensional Scatter Chart"
+          },
+          "meta": {
+            "title": "One-Dimensional Scatter Chart",
+            "keywords": "",
+            "category": "examples",
+            "group": "scatter chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/scatter-chart/one-dimension-scatter.png",
+            "link": "",
+            "option": "scatterChart"
           }
         },
         {
@@ -1183,6 +3101,15 @@
           "title": {
             "zh": "堆叠散点图",
             "en": "Stacked Scatter Plot"
+          },
+          "meta": {
+            "title": "Stacked Scatter Plot",
+            "keywords": "",
+            "category": "examples",
+            "group": "scatter chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/scatter-chart/stack-scatter.png",
+            "link": "",
+            "option": "scatterChart"
           }
         }
       ]
@@ -1199,6 +3126,15 @@
           "title": {
             "zh": "scrollBar 基础用法",
             "en": "Basic Usage of scrollBar"
+          },
+          "meta": {
+            "title": "Basic Usage of scrollBar",
+            "keywords": "scrollBar",
+            "category": "examples",
+            "group": "scrollBar",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/scrollbar/basic-scrollbar-bar-chart.png",
+            "link": "",
+            "option": "barChart#scrollbar"
           }
         },
         {
@@ -1206,6 +3142,15 @@
           "title": {
             "zh": "scrollBar 控制轴范围",
             "en": "scrollBar Controls Axis Range"
+          },
+          "meta": {
+            "title": "scrollBar Controls Axis Range",
+            "keywords": "scrollBar",
+            "category": "examples",
+            "group": "scrollBar",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/scrollbar/scrollbar-line-chart.png",
+            "link": "",
+            "option": "lineChart#scrollbar"
           }
         },
         {
@@ -1213,6 +3158,15 @@
           "title": {
             "zh": "纵向 scrollBar",
             "en": "Vertical scrollBar"
+          },
+          "meta": {
+            "title": "Vertical scrollBar",
+            "keywords": "scrollBar",
+            "category": "examples",
+            "group": "scrollBar",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/scrollbar/scrollbar-specified-value.png",
+            "link": "",
+            "option": "barChart#scrollbar"
           }
         }
       ]
@@ -1229,6 +3183,15 @@
           "title": {
             "zh": "NBA运动员时序图",
             "en": "NBA Sequence Chart"
+          },
+          "meta": {
+            "title": "NBA Sequence Chart",
+            "keywords": "sequence,comparison,relationShip,line,scatter,title,axis",
+            "category": "examples",
+            "group": "sequence chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sequence-chart/NBA-player-event.png",
+            "link": "",
+            "option": "sequenceChart"
           }
         },
         {
@@ -1236,6 +3199,120 @@
           "title": {
             "zh": "社交媒体时序图",
             "en": "Social Media Seuqnce Chart"
+          },
+          "meta": {
+            "title": "Social Media Seuqnce Chart",
+            "keywords": "sequence,comparison,relationShip,line,scatter,rectangle,dataZoom",
+            "category": "examples",
+            "group": "sequence chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sequence-chart/social-media-event.png",
+            "link": "",
+            "option": ""
+          }
+        }
+      ]
+    },
+    {
+      "path": "storytelling",
+      "title": {
+        "zh": "storytelling",
+        "en": "storytelling"
+      },
+      "children": [
+        {
+          "path": "dynamic-comparative-bar-chart",
+          "title": {
+            "zh": "动态对比柱状图",
+            "en": "Dynamic Comparative Bar Chart"
+          },
+          "meta": {
+            "title": "Dynamic Comparative Bar Chart",
+            "keywords": "barChart,comparison,animation,player",
+            "category": "examples",
+            "group": "storytelling",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/storytelling/dynamic-comparative-bar-chart.gif",
+            "link": "",
+            "option": "commonChart"
+          }
+        },
+        {
+          "path": "dynamic-line-chart",
+          "title": {
+            "zh": "动态线图",
+            "en": "Dynamic Line Chart"
+          },
+          "meta": {
+            "title": "Dynamic Line Chart",
+            "keywords": "lineChart,comparison,trend,line,animation",
+            "category": "examples",
+            "group": "storytelling",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/storytelling/dynamic-line-chart.gif",
+            "link": "",
+            "option": "lineChart"
+          }
+        },
+        {
+          "path": "dynamic-rose-chart",
+          "title": {
+            "zh": "动态玫瑰图",
+            "en": "Dynamic Rose Chart"
+          },
+          "meta": {
+            "title": "Dynamic Rose Chart",
+            "keywords": "roseChart,comparison,composition,animation",
+            "category": "examples",
+            "group": "storytelling",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/storytelling/dynamic-rose-chart.gif",
+            "link": "",
+            "option": "roseChart"
+          }
+        },
+        {
+          "path": "ranking-bar",
+          "title": {
+            "zh": "动态条形图",
+            "en": "Dynamic Bar Chart"
+          },
+          "meta": {
+            "title": "Dynamic Bar Chart",
+            "keywords": "barChart, animation, player, rank, rectangle",
+            "category": "examples",
+            "group": "storytelling",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/storytelling/ranking-bar.gif",
+            "link": "",
+            "option": "barChart"
+          }
+        },
+        {
+          "path": "timeline-scatter",
+          "title": {
+            "zh": "动态散点图",
+            "en": "Dynamic Scatterplot"
+          },
+          "meta": {
+            "title": "Dynamic Scatterplot",
+            "keywords": "scatterChart,scatter,animation,player",
+            "category": "examples",
+            "group": "storytelling",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/storytelling/timeline-scatter.gif",
+            "link": "",
+            "option": "scatterChart"
+          }
+        },
+        {
+          "path": "weekly-activity",
+          "title": {
+            "zh": "环形图",
+            "en": "Circular Chart"
+          },
+          "meta": {
+            "title": "Circular Chart",
+            "keywords": "circularProgress,circle,animation",
+            "category": "examples",
+            "group": "storytelling",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/storytelling/weekly-activity.gif",
+            "link": "",
+            "option": "circularProgress"
           }
         }
       ]
@@ -1252,6 +3329,15 @@
           "title": {
             "zh": "基础旭日图",
             "en": "Basic Sunburst Chart"
+          },
+          "meta": {
+            "title": "Basic Sunburst Chart",
+            "keywords": "sunburst,composition,relationShip,circle",
+            "category": "examples",
+            "group": "sunburst chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sunburst-chart/basic-sunburst.png",
+            "link": "",
+            "option": "sunburstChart"
           }
         },
         {
@@ -1259,6 +3345,15 @@
           "title": {
             "zh": "旭日图隐藏密集标签",
             "en": "Sunburst - Hiding Dense Labels"
+          },
+          "meta": {
+            "title": "Sunburst - Hiding Dense Labels",
+            "keywords": "sunburst,composition,relationShip,circle",
+            "category": "examples",
+            "group": "sunburst chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sunburst-chart/sunburst-auto-label.png",
+            "link": "",
+            "option": "sunburstChart"
           }
         },
         {
@@ -1266,22 +3361,65 @@
           "title": {
             "zh": "旭日图布局",
             "en": "Sunburst Layout"
+          },
+          "meta": {
+            "title": "Sunburst Layout",
+            "keywords": "sunburst,composition,relationShip,circle",
+            "category": "examples",
+            "group": "sunburst chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sunburst-chart/sunburst-layout.png",
+            "link": "",
+            "option": "sunburstChart"
           }
         }
       ]
     },
     {
-      "path": "title",
+      "path": "theme",
       "title": {
-        "zh": "title",
-        "en": "title"
+        "zh": "theme",
+        "en": "theme"
       },
       "children": [
         {
-          "path": "basic-title",
+          "path": "theme-switch",
           "title": {
-            "zh": "基础标题",
+            "zh": "主题注册、切换",
+            "en": "Theme Registration and Switching"
+          },
+          "meta": {
+            "title": "Theme Registration and Switching",
+            "keywords": "",
+            "category": "examples",
+            "group": "theme",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/theme/theme-switch.png",
+            "link": "",
+            "option": ""
+          }
+        }
+      ]
+    },
+    {
+      "path": "title",
+      "title": {
+        "zh": "title",
+        "en": "title"
+      },
+      "children": [
+        {
+          "path": "basic-title",
+          "title": {
+            "zh": "基础标题",
             "en": "Basic Title"
+          },
+          "meta": {
+            "title": "Basic Title",
+            "keywords": "title",
+            "category": "demo",
+            "group": "title",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/title/basic-title.png",
+            "link": "",
+            "option": "lineChart#title"
           }
         },
         {
@@ -1289,6 +3427,15 @@
           "title": {
             "zh": "富文本标题",
             "en": "Rich Text Title"
+          },
+          "meta": {
+            "title": "Rich Text Title",
+            "keywords": "title",
+            "category": "demo",
+            "group": "title",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/title/richText-title.png",
+            "link": "",
+            "option": "lineChart#title"
           }
         },
         {
@@ -1296,6 +3443,88 @@
           "title": {
             "zh": "自定义样式标题",
             "en": "Customize Style Title"
+          },
+          "meta": {
+            "title": "Customize Style Title",
+            "keywords": "title",
+            "category": "demo",
+            "group": "title",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/title/style-title.png",
+            "link": "",
+            "option": "lineChart#title"
+          }
+        }
+      ]
+    },
+    {
+      "path": "tooltip",
+      "title": {
+        "zh": "tooltip",
+        "en": "tooltip"
+      },
+      "children": [
+        {
+          "path": "custom-mark-tooltip",
+          "title": {
+            "zh": "自定义 tooltip 内容行",
+            "en": "Custom Tooltip Content Row"
+          },
+          "meta": {
+            "title": "Custom Tooltip Content Row",
+            "keywords": "tooltip",
+            "category": "demo",
+            "group": "tooltip",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/tooltip/custom-mark-tooltip.png",
+            "link": "",
+            "option": "funnelChart#tooltip"
+          }
+        },
+        {
+          "path": "custom-tooltip-handler",
+          "title": {
+            "zh": "自定义 tooltip handler",
+            "en": "Custom tooltip handler"
+          },
+          "meta": {
+            "title": "Custom tooltip handler",
+            "keywords": "tooltip",
+            "category": "demo",
+            "group": "tooltip",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/7b82fb013e7c6319c065b3d03.png",
+            "link": "",
+            "option": "roseChart#tooltip"
+          }
+        },
+        {
+          "path": "custom-tooltip",
+          "title": {
+            "zh": "自定义 tooltip",
+            "en": "Custom tooltip style"
+          },
+          "meta": {
+            "title": "Custom tooltip style",
+            "keywords": "tooltip",
+            "category": "demo",
+            "group": "tooltip",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/tooltip/custom-tooltip.png",
+            "link": "",
+            "option": "barChart#tooltip"
+          }
+        },
+        {
+          "path": "format-method",
+          "title": {
+            "zh": "tooltip 格式化内容",
+            "en": "Tooltip Custom Formatting"
+          },
+          "meta": {
+            "title": "Tooltip Custom Formatting",
+            "keywords": "tooltip",
+            "category": "demo",
+            "group": "tooltip",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/57a706137957fce7388f3ab05.png",
+            "link": "",
+            "option": "barChart#tooltip"
           }
         }
       ]
@@ -1312,6 +3541,15 @@
           "title": {
             "zh": "基础矩形树图",
             "en": "Basic Rectangle Treemap"
+          },
+          "meta": {
+            "title": "Basic Rectangle Treemap",
+            "keywords": "treemap,rectangle,comparison,composition,relationship",
+            "category": "examples",
+            "group": "treemap chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/treemap-chart/basic-treemap.png",
+            "link": "",
+            "option": "treemapChart"
           }
         },
         {
@@ -1319,6 +3557,15 @@
           "title": {
             "zh": "矩形树图显示父层级",
             "en": "Treemap Displaying Parent Level"
+          },
+          "meta": {
+            "title": "Treemap Displaying Parent Level",
+            "keywords": "treemap,rectangle,comparison,composition,relationship",
+            "category": "examples",
+            "group": "treemap chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/treemap-chart/treemap-show-parent-level.png",
+            "link": "",
+            "option": "treemapChart"
           }
         }
       ]
@@ -1335,6 +3582,15 @@
           "title": {
             "zh": "基础瀑布图",
             "en": "Basic Waterfall Chart"
+          },
+          "meta": {
+            "title": "Basic Waterfall Chart",
+            "keywords": "waterfall, comparison, distribution, rectangle",
+            "category": "demo",
+            "group": "waterfall",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/waterfall/basic-waterfall.png",
+            "link": "",
+            "option": "waterfallChart"
           }
         },
         {
@@ -1342,6 +3598,15 @@
           "title": {
             "zh": "分解瀑布图",
             "en": "Decomposition Waterfall Chart"
+          },
+          "meta": {
+            "title": "Decomposition Waterfall Chart",
+            "keywords": "waterfall,comparison,distribution,rectangle",
+            "category": "demo",
+            "group": "waterfall",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/waterfall/collect-waterfall.png",
+            "link": "",
+            "option": "waterfallChart"
           }
         },
         {
@@ -1349,6 +3614,15 @@
           "title": {
             "zh": "水平瀑布图",
             "en": "Horizontal Waterfall Chart"
+          },
+          "meta": {
+            "title": "Horizontal Waterfall Chart",
+            "keywords": "waterfall,comparison,distribution,rectangle",
+            "category": "demo",
+            "group": "waterfall",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/waterfall/direction-waterfall.png",
+            "link": "",
+            "option": "waterfallChart"
           }
         },
         {
@@ -1356,6 +3630,15 @@
           "title": {
             "zh": "堆积瀑布图",
             "en": "Stacked Waterfall Chart"
+          },
+          "meta": {
+            "title": "Stacked Waterfall Chart",
+            "keywords": "waterfall, comparison, distribution, rectangle",
+            "category": "demo",
+            "group": "waterfall",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/waterfall/stack-waterfall.png",
+            "link": "",
+            "option": "waterfallChart"
           }
         }
       ]
@@ -1367,11 +3650,36 @@
         "en": "word-cloud-chart"
       },
       "children": [
+        {
+          "path": "word-cloud-basic",
+          "title": {
+            "zh": "基础词云图",
+            "en": "Basic Word Cloud Chart"
+          },
+          "meta": {
+            "title": "Basic Word Cloud Chart",
+            "keywords": "wordCloud,text,distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/word-cloud-chart/word-cloud-basis.png",
+            "link": "",
+            "option": "wordCloudChart"
+          }
+        },
         {
           "path": "word-cloud-clip",
           "title": {
             "zh": "词云图文本裁剪",
             "en": "Word Cloud Text Clipping"
+          },
+          "meta": {
+            "title": "Word Cloud Text Clipping",
+            "keywords": "wordCloud,text,distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/word-cloud-chart/word-cloud-clip.png",
+            "link": "",
+            "option": "wordCloudChart"
           }
         },
         {
@@ -1379,6 +3687,15 @@
           "title": {
             "zh": "词云图全局自适应画布",
             "en": "Word Cloud Auto-fit to Canvas"
+          },
+          "meta": {
+            "title": "Word Cloud Auto-fit to Canvas",
+            "keywords": "wordCloud,text,distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c81703.png",
+            "link": "",
+            "option": "wordCloudChart"
           }
         },
         {
@@ -1386,6 +3703,15 @@
           "title": {
             "zh": "词云图文字格式化",
             "en": "Word Cloud Text Formatting"
+          },
+          "meta": {
+            "title": "Word Cloud Text Formatting",
+            "keywords": "wordCloud,text,distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/word-cloud-chart/word-cloud-format.png",
+            "link": "",
+            "option": "wordCloudChart"
           }
         },
         {
@@ -1393,6 +3719,15 @@
           "title": {
             "zh": "词云图不配置大小字段",
             "en": "Word Cloud without Size Field Configuration"
+          },
+          "meta": {
+            "title": "Word Cloud without Size Field Configuration",
+            "keywords": "wordCloud, text, distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/word-cloud-chart/word-cloud-no-valueField.png",
+            "link": "",
+            "option": ""
           }
         },
         {
@@ -1400,6 +3735,15 @@
           "title": {
             "zh": "词云图随机角度",
             "en": "Word Cloud with Random Angle"
+          },
+          "meta": {
+            "title": "Word Cloud with Random Angle",
+            "keywords": "wordCloud,text,distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c81700.png",
+            "link": "",
+            "option": "wordCloudChart"
           }
         },
         {
@@ -1407,6 +3751,15 @@
           "title": {
             "zh": "形状词云图",
             "en": "Shape Word Cloud"
+          },
+          "meta": {
+            "title": "Shape Word Cloud",
+            "keywords": "wordCloud,text,distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c81701.png",
+            "link": "",
+            "option": "wordCloudChart"
           }
         },
         {
@@ -1414,6 +3767,15 @@
           "title": {
             "zh": "形状词云图自定义颜色",
             "en": "Shape Word Cloud Custom Color"
+          },
+          "meta": {
+            "title": "Shape Word Cloud Custom Color",
+            "keywords": "wordCloud,text,distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/word-cloud-chart/word-cloud-shape-custom-color.png",
+            "link": "",
+            "option": "wordCloudChart"
           }
         },
         {
@@ -1421,6 +3783,15 @@
           "title": {
             "zh": "形状词云图随机旋转角",
             "en": "Shape Word Cloud with Random Rotation Angles"
+          },
+          "meta": {
+            "title": "Shape Word Cloud with Random Rotation Angles",
+            "keywords": "wordCloud,text,distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/word-cloud-chart/word-cloud-shape-rotate.png",
+            "link": "",
+            "option": "wordCloudChart"
           }
         },
         {
@@ -1428,481 +3799,18 @@
           "title": {
             "zh": "词云图文字缩放",
             "en": "Word Cloud Text Scaling"
-          }
-        },
-        {
-          "path": "word-cloud-basic",
-          "title": {
-            "zh": "基础词云图",
-            "en": "Basic Word Cloud Chart"
-          }
-        }
-      ]
-    },
-    {
-      "path": "brush",
-      "title": {
-        "zh": "brush",
-        "en": "brush"
-      },
-      "children": [
-        {
-          "path": "x-linked-brush",
-          "title": {
-            "zh": "横向选择框选",
-            "en": "Horizontal Selection Box"
-          }
-        },
-        {
-          "path": "polygon-brush",
-          "title": {
-            "zh": "不规则框选",
-            "en": "Irregular Rectangle Selection"
-          }
-        },
-        {
-          "path": "rect-linked-brush",
-          "title": {
-            "zh": "矩形关联框选",
-            "en": "Rect Linked Brush"
-          }
-        }
-      ]
-    },
-    {
-      "path": "gauge-chart",
-      "title": {
-        "zh": "gauge-chart",
-        "en": "gauge-chart"
-      },
-      "children": [
-        {
-          "path": "basic-gauge",
-          "title": {
-            "zh": "基础仪表图",
-            "en": "Basic Gauge Chart"
-          }
-        },
-        {
-          "path": "clock",
-          "title": {
-            "zh": "时钟示例",
-            "en": "Clock Example"
-          }
-        },
-        {
-          "path": "gauge-gradient",
-          "title": {
-            "zh": "渐变仪表图",
-            "en": "Gradient Gauge Chart"
-          }
-        },
-        {
-          "path": "gauge-progress",
-          "title": {
-            "zh": "使用circularProgress声明仪表图",
-            "en": "使用circularProgress声明仪表图"
-          }
-        }
-      ]
-    },
-    {
-      "path": "pie-chart",
-      "title": {
-        "zh": "pie-chart",
-        "en": "pie-chart"
-      },
-      "children": [
-        {
-          "path": "basic-pie",
-          "title": {
-            "zh": "基础饼图",
-            "en": "Basic Pie Chart"
-          }
-        },
-        {
-          "path": "nested-pie",
-          "title": {
-            "zh": "嵌套饼图",
-            "en": "Nested Pie Chart"
-          }
-        },
-        {
-          "path": "pie-indicator",
-          "title": {
-            "zh": "带指标卡饼图",
-            "en": "Pie Chart with Indicator Card"
-          }
-        },
-        {
-          "path": "pie-label",
-          "title": {
-            "zh": "饼图标签布局",
-            "en": "Pie Chart Label Layout"
-          }
-        },
-        {
-          "path": "radius-scale-pie",
-          "title": {
-            "zh": "半径可映射饼图",
-            "en": "Radius mappable pie chart"
-          }
-        },
-        {
-          "path": "ring",
-          "title": {
-            "zh": "环图",
-            "en": "Ring Chart"
-          }
-        }
-      ]
-    },
-    {
-      "path": "progress",
-      "title": {
-        "zh": "progress",
-        "en": "progress"
-      },
-      "children": [
-        {
-          "path": "circular-progress",
-          "title": {
-            "zh": "环形进度图",
-            "en": "Circular Progress Chart"
-          }
-        },
-        {
-          "path": "linear-progress",
-          "title": {
-            "zh": "条形进度图",
-            "en": "Bar Progress Chart"
-          }
-        },
-        {
-          "path": "linear-progress-with-text",
-          "title": {
-            "zh": "带文本标注的条形进度图",
-            "en": "Bar chart with text labeling"
-          }
-        },
-        {
-          "path": "segment-linear-progress",
-          "title": {
-            "zh": "分段条形进度图",
-            "en": "Segmented Bar Progress Chart"
+          },
+          "meta": {
+            "title": "Word Cloud Text Scaling",
+            "keywords": "wordCloud,text,distribution",
+            "category": "examples",
+            "group": "word chart",
+            "cover": "http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/word-cloud-chart/word-cloud-shrink.png",
+            "link": "",
+            "option": "wordCloudChart"
           }
         }
       ]
-    },
-    {
-      "path": "theme",
-      "title": {
-        "zh": "theme",
-        "en": "theme"
-      },
-      "children": [
-        {
-          "path": "theme-switch",
-          "title": {
-            "zh": "主题注册、切换",
-            "en": "Theme Registration and Switching"
-          }
-        }
-      ]
-    },
-    {
-      "path": "chart-3d",
-      "title": {
-        "zh": "chart-3d",
-        "en": "chart-3d"
-      },
-      "children": [
-        {
-          "path": "area3d",
-          "title": {
-            "zh": "3D面积图",
-            "en": "3D面积图"
-          }
-        },
-        {
-          "path": "bar3d",
-          "title": {
-            "zh": "3D 基础柱状图",
-            "en": "3D Base Bar Chart"
-          }
-        },
-        {
-          "path": "funnel3d",
-          "title": {
-            "zh": "3D 基础漏斗图",
-            "en": "3D Basic Funnel Chart"
-          }
-        },
-        {
-          "path": "line3d",
-          "title": {
-            "zh": "3D 折线图",
-            "en": "3D 折线图"
-          }
-        },
-        {
-          "path": "pie3d",
-          "title": {
-            "zh": "3D 基础饼图",
-            "en": "3D Basic Pie Chart"
-          }
-        },
-        {
-          "path": "scatter3d",
-          "title": {
-            "zh": "3D 散点图",
-            "en": "3D Scatter Chart"
-          }
-        },
-        {
-          "path": "wordcloud3d",
-          "title": {
-            "zh": "3D 形状词云图",
-            "en": "3D Shape Word Cloud"
-          }
-        }
-      ]
-    },
-    {
-      "path": "tooltip",
-      "title": {
-        "zh": "tooltip",
-        "en": "tooltip"
-      },
-      "children": [
-        {
-          "path": "custom-tooltip",
-          "title": {
-            "zh": "自定义 tooltip",
-            "en": "Custom tooltip style"
-          }
-        },
-        {
-          "path": "custom-mark-tooltip",
-          "title": {
-            "zh": "自定义 tooltip 内容行",
-            "en": "Custom Tooltip Content Row"
-          }
-        },
-        {
-          "path": "custom-tooltip-handler",
-          "title": {
-            "zh": "自定义 tooltip handler",
-            "en": "Custom tooltip handler"
-          }
-        },
-        {
-          "path": "format-method",
-          "title": {
-            "zh": "tooltip 格式化内容",
-            "en": "Tooltip Custom Formatting"
-          }
-        }
-      ]
-    },
-    {
-      "path": "heatmap-chart",
-      "title": {
-        "zh": "heatmap-chart",
-        "en": "heatmap-chart"
-      },
-      "children": [
-        {
-          "path": "basic-heatmap",
-          "title": {
-            "zh": "基础热力图",
-            "en": "Basic Heatmap"
-          }
-        }
-      ]
-    },
-    {
-      "path": "label",
-      "title": {
-        "zh": "label",
-        "en": "label"
-      },
-      "children": [
-        {
-          "path": "bar-label",
-          "title": {
-            "zh": "柱状图标签",
-            "en": "Bar Chart Labels"
-          }
-        },
-        {
-          "path": "combination-chart-label",
-          "title": {
-            "zh": "组合图标签",
-            "en": "Combination Chart Labels"
-          }
-        },
-        {
-          "path": "line-label",
-          "title": {
-            "zh": "折线图标签",
-            "en": "Line Chart Labels"
-          }
-        }
-      ]
-    },
-    {
-      "path": "layout",
-      "title": {
-        "zh": "layout",
-        "en": "layout"
-      },
-      "children": [
-        {
-          "path": "custom-layout",
-          "title": {
-            "zh": "自定义布局",
-            "en": "Custom Layout"
-          }
-        },
-        {
-          "path": "grid-layout",
-          "title": {
-            "zh": "行列布局",
-            "en": "Row and Column Layout"
-          }
-        }
-      ]
-    },
-    {
-      "path": "preview-image",
-      "title": {
-        "zh": "preview-image",
-        "en": "preview-image"
-      },
-      "children": [
-        {
-          "path": "bi-direction-stack-column_files",
-          "title": {
-            "zh": "bi-direction-stack-column_files",
-            "en": "bi-direction-stack-column_files"
-          },
-          "children": []
-        }
-      ]
-    },
-    {
-      "path": "custom",
-      "title": {
-        "zh": "custom",
-        "en": "custom"
-      },
-      "children": [
-        {
-          "path": "mark",
-          "title": {
-            "zh": "自定义 mark",
-            "en": "Custom Mark"
-          }
-        },
-        {
-          "path": "series-extension",
-          "title": {
-            "zh": "自定义 symbol mark",
-            "en": "Custom Symbol Mark"
-          }
-        }
-      ]
-    },
-    {
-      "path": "log",
-      "title": {
-        "zh": "log",
-        "en": "log"
-      },
-      "children": []
-    },
-    {
-      "path": "morphing",
-      "title": {
-        "zh": "全局动画",
-        "en": "morphing"
-      },
-      "children": [
-        {
-          "path": "bar-to-pie",
-          "title": {
-            "zh": "柱状图、饼图间切换的全局动画",
-            "en": "Global animation for switching between bar and pie charts"
-          }
-        },
-        {
-          "path": "bar-to-scatter",
-          "title": {
-            "zh": "柱状图、散点图间切换的全局动画",
-            "en": "Global animation for switching between bar charts and scatter plots"
-          }
-        }
-      ]
-    },
-    {
-      "path": "storytelling",
-      "title": {
-        "zh": "storytelling",
-        "en": "storytelling"
-      },
-      "children": [
-        {
-          "path": "dynamic-comparative-bar-chart",
-          "title": {
-            "zh": "动态对比柱状图",
-            "en": "Dynamic Comparative Bar Chart"
-          }
-        },
-        {
-          "path": "dynamic-line-chart",
-          "title": {
-            "zh": "动态线图",
-            "en": "Dynamic Line Chart"
-          }
-        },
-        {
-          "path": "dynamic-rose-chart",
-          "title": {
-            "zh": "动态玫瑰图",
-            "en": "Dynamic Rose Chart"
-          }
-        },
-        {
-          "path": "ranking-bar",
-          "title": {
-            "zh": "动态条形图",
-            "en": "Dynamic Bar Chart"
-          }
-        },
-        {
-          "path": "timeline-scatter",
-          "title": {
-            "zh": "动态散点图",
-            "en": "Dynamic Scatterplot"
-          }
-        },
-        {
-          "path": "weekly-activity",
-          "title": {
-            "zh": "环形图",
-            "en": "Circular Chart"
-          }
-        }
-      ]
-    },
-    {
-      "path": "preview-image-temp",
-      "title": {
-        "zh": "preview-image-temp",
-        "en": "preview-image-temp"
-      },
-      "children": []
     }
   ]
 }
\ No newline at end of file
diff --git a/docs/src/option.tsx b/docs/src/option.tsx
index 50a887a1af..33959e840e 100644
--- a/docs/src/option.tsx
+++ b/docs/src/option.tsx
@@ -6,6 +6,7 @@ import { LanguageContext } from './i18n';
 import { OptionDocument } from './option/index';
 import { parseOutline } from './option/outline';
 import { parseDescription } from './option/description';
+import menu from '../menu.json';
 
 export function Option() {
   const { language, setLanguage } = useContext(LanguageContext);
@@ -14,11 +15,13 @@ export function Option() {
   const { pathname: pathName } = location;
   const assetDirectory = pathName.split('/')[1];
 
+  const menuConfig = menu.find(menuItem => menuItem.menu === assetDirectory);
+
   const getOutline = async () => {
     try {
       const response = await fetch(`/documents/${assetDirectory}/${language}/outline.json`);
       const json = await response.json();
-      return parseOutline(json);
+      return parseOutline(json, menuConfig?.sectionMap ?? {});
     } catch (e) {
       console.log(e);
     }
diff --git a/docs/src/option/description.tsx b/docs/src/option/description.tsx
index dd2b3efdf9..2e970d94bf 100644
--- a/docs/src/option/description.tsx
+++ b/docs/src/option/description.tsx
@@ -1,8 +1,9 @@
 import { IconMinus, IconPlus } from '@arco-design/web-react/icon';
-import { IOptionOutlineNode } from './outline';
 import { Button } from '@arco-design/web-react';
+import { array } from '@visactor/vutils';
 import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import { IOptionOutlineNode } from './outline';
 
 export interface IOptionDescriptionNode {
   desc: string;
@@ -84,20 +85,24 @@ function DescriptionLeaf(props: IDescriptionNodeProps) {
         {leafText}
         <span style={{ color: 'rgb(134, 144, 156)' }}>{outline.default ? ` = ${outline.default}` : ''}</span>
       </h2>
-      {outline.type && outline.type !== '' && (
-        <div
-          style={{
-            background: 'rgb(232, 243, 255)',
-            width: 'fit-content',
-            padding: '0px 10px',
-            marginBottom: 10,
-            color: 'rgb(22, 93, 255)',
-            borderRadius: 2
-          }}
-        >
-          {outline.type}
-        </div>
-      )}
+      {outline.type && outline.type !== ''
+        ? array(outline.type).map(type => (
+            <div
+              style={{
+                background: 'rgb(232, 243, 255)',
+                width: 'fit-content',
+                padding: '0px 10px',
+                marginBottom: 10,
+                marginRight: 6,
+                color: 'rgb(22, 93, 255)',
+                borderRadius: 2,
+                display: 'inline-block'
+              }}
+            >
+              {type}
+            </div>
+          ))
+        : null}
       <div dangerouslySetInnerHTML={{ __html: description.desc }}></div>
     </div>
   );
@@ -189,20 +194,24 @@ function DescriptionNode(props: IDescriptionNodeProps) {
         {leafText}
         <span style={{ color: 'rgb(134, 144, 156)' }}>{outline.default ? ` = ${outline.default}` : ''}</span>
       </h2>
-      {outline.type && outline.type !== '' && (
-        <div
-          style={{
-            background: 'rgb(232, 243, 255)',
-            width: 'fit-content',
-            padding: '0px 10px',
-            marginBottom: 10,
-            color: 'rgb(22, 93, 255)',
-            borderRadius: 2
-          }}
-        >
-          {outline.type}
-        </div>
-      )}
+      {outline.type && outline.type !== ''
+        ? array(outline.type).map(type => (
+            <div
+              style={{
+                background: 'rgb(232, 243, 255)',
+                width: 'fit-content',
+                padding: '0px 10px',
+                marginBottom: 10,
+                marginRight: 6,
+                color: 'rgb(22, 93, 255)',
+                borderRadius: 2,
+                display: 'inline-block'
+              }}
+            >
+              {type}
+            </div>
+          ))
+        : null}
       <div dangerouslySetInnerHTML={{ __html: description.desc }}></div>
       <div style={{ marginLeft: 12 }}>
         {showChildren