diff --git a/nezha-docs/docs/.vitepress/sidebar.js b/nezha-docs/docs/.vitepress/sidebar.js
index 11dd06901..b95e72edc 100644
--- a/nezha-docs/docs/.vitepress/sidebar.js
+++ b/nezha-docs/docs/.vitepress/sidebar.js
@@ -30,7 +30,9 @@ export const sidebar = {
                   text: 'chart',
                   link: '/chart',
                   items: [
-                    {text: 'chartTimeSeries', link: '/chartTimeSeries'}
+                    {text: 'chartTimeSeries', link: '/chartTimeSeries'},
+                    {text: 'chartAutotopology', link: '/chartAutotopology'},
+                    {text: 'chartDiagram', link: '/chartDiagram'},
                   ]
                 }
               ]
diff --git a/nezha-docs/src/chart/chartChild/chartAutotopology/chartAutotopology.vue b/nezha-docs/src/chart/chartChild/chartAutotopology/chartAutotopology.vue
new file mode 100644
index 000000000..818e84111
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartAutotopology/chartAutotopology.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  /**
+   * chart相关信息 主要是要里面的 id 以及 params
+   */
+  chartInfo?: {  },
+ /**
+   * chart数据
+   */
+ chartData?:  [],
+  /**
+   *  chart相应配置
+   */
+  chartOption?: {  },
+  /**
+   *  但是否显示全部数据
+   */
+  showAllData?: Boolean,
+  /**
+   *  dashboard 相关变量
+   */
+  globalVariables?: [],
+
+}>(), {
+
+})
+</script>
+
+<template>
+  <div>
+  </div>
+</template>
diff --git a/nezha-docs/src/chart/chartChild/chartAutotopology/demo.vue b/nezha-docs/src/chart/chartChild/chartAutotopology/demo.vue
new file mode 100644
index 000000000..bc8216a9c
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartAutotopology/demo.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <div></div>
+</template>
+
+<style>
+
+</style>
diff --git a/nezha-docs/src/chart/chartChild/chartAutotopology/index.en-US.md b/nezha-docs/src/chart/chartChild/chartAutotopology/index.en-US.md
new file mode 100644
index 000000000..23d2bf7a5
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartAutotopology/index.en-US.md
@@ -0,0 +1,19 @@
+---
+map:
+  path: /chartAutotopology
+---
+
+# 关联组件
+1. meta2dMain topo图组件
+
+```vue
+ <el-carousel>
+  <el-carousel-item v-for="(item,index) in allProject">
+    <meta2dMain/>
+  </el-carousel-item>
+</el-carousel>
+```
+
+props 跟chartTimeSeries 一致
+
+<API src="./chartAutotopology.vue" lang="en"></API>
diff --git a/nezha-docs/src/chart/chartChild/chartAutotopology/index.zh-CN.md b/nezha-docs/src/chart/chartChild/chartAutotopology/index.zh-CN.md
new file mode 100644
index 000000000..5665aa52e
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartAutotopology/index.zh-CN.md
@@ -0,0 +1,19 @@
+---
+map:
+  path: /chartAutotopology
+---
+
+# 关联组件
+1. meta2dMain topo图组件
+
+```vue
+ <el-carousel>
+  <el-carousel-item v-for="(item,index) in allProject">
+    <meta2dMain/>
+  </el-carousel-item>
+</el-carousel>
+```
+
+props 跟chartTimeSeries 一致
+
+<API src="./chartAutotopology.vue" lang="zh"></API>
diff --git a/nezha-docs/src/chart/chartChild/chartDiagram/chartDiagram.vue b/nezha-docs/src/chart/chartChild/chartDiagram/chartDiagram.vue
new file mode 100644
index 000000000..818e84111
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartDiagram/chartDiagram.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  /**
+   * chart相关信息 主要是要里面的 id 以及 params
+   */
+  chartInfo?: {  },
+ /**
+   * chart数据
+   */
+ chartData?:  [],
+  /**
+   *  chart相应配置
+   */
+  chartOption?: {  },
+  /**
+   *  但是否显示全部数据
+   */
+  showAllData?: Boolean,
+  /**
+   *  dashboard 相关变量
+   */
+  globalVariables?: [],
+
+}>(), {
+
+})
+</script>
+
+<template>
+  <div>
+  </div>
+</template>
diff --git a/nezha-docs/src/chart/chartChild/chartDiagram/demo.vue b/nezha-docs/src/chart/chartChild/chartDiagram/demo.vue
new file mode 100644
index 000000000..bc8216a9c
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartDiagram/demo.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <div></div>
+</template>
+
+<style>
+
+</style>
diff --git a/nezha-docs/src/chart/chartChild/chartDiagram/index.en-US.md b/nezha-docs/src/chart/chartChild/chartDiagram/index.en-US.md
new file mode 100644
index 000000000..30198515b
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartDiagram/index.en-US.md
@@ -0,0 +1,17 @@
+---
+map:
+  path: /chartDiagram
+---
+
+# 关联组件
+1. meta2dMain topo图组件
+
+```vue
+<div>
+  <meta2dMain />
+</div>
+```
+
+props 跟chartTimeSeries 一致
+
+<API src="./chartDiagram.vue" lang="en"></API>
diff --git a/nezha-docs/src/chart/chartChild/chartDiagram/index.zh-CN.md b/nezha-docs/src/chart/chartChild/chartDiagram/index.zh-CN.md
new file mode 100644
index 000000000..30198515b
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartDiagram/index.zh-CN.md
@@ -0,0 +1,17 @@
+---
+map:
+  path: /chartDiagram
+---
+
+# 关联组件
+1. meta2dMain topo图组件
+
+```vue
+<div>
+  <meta2dMain />
+</div>
+```
+
+props 跟chartTimeSeries 一致
+
+<API src="./chartDiagram.vue" lang="en"></API>
diff --git a/nezha-docs/src/chart/chartChild/chartLegend/chartLegend.vue b/nezha-docs/src/chart/chartChild/chartLegend/chartLegend.vue
new file mode 100644
index 000000000..d3da9a219
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartLegend/chartLegend.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  /**
+   * chart相关信息 主要是要里面的 id 以及 params
+   */
+  chartInfo?: {  },
+ /**
+   * chart数据
+   */
+ chartData?:  [],
+  /**
+   * legend 数据
+   */
+  legends: [],
+  /**
+   * 是否全屏
+   */
+  isFullscreen: boolean,
+  /**
+   * 所有根据图表处理过后的数据
+   */
+  series: []
+
+}>(), {
+
+})
+</script>
+
+<template>
+  <div>
+  </div>
+</template>
diff --git a/nezha-docs/src/chart/chartChild/chartLegend/demo.vue b/nezha-docs/src/chart/chartChild/chartLegend/demo.vue
new file mode 100644
index 000000000..bc8216a9c
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartLegend/demo.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <div></div>
+</template>
+
+<style>
+
+</style>
diff --git a/nezha-docs/src/chart/chartChild/chartLegend/index.en-US.md b/nezha-docs/src/chart/chartChild/chartLegend/index.en-US.md
new file mode 100644
index 000000000..5c0223369
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartLegend/index.en-US.md
@@ -0,0 +1,7 @@
+---
+map:
+  path: /chartLegend
+---
+ 
+
+<API src="./chartLegend.vue" lang="en"></API>
diff --git a/nezha-docs/src/chart/chartChild/chartLegend/index.zh-CN.md b/nezha-docs/src/chart/chartChild/chartLegend/index.zh-CN.md
new file mode 100644
index 000000000..7953f7767
--- /dev/null
+++ b/nezha-docs/src/chart/chartChild/chartLegend/index.zh-CN.md
@@ -0,0 +1,6 @@
+---
+map:
+  path: /chartLegend
+---
+
+<API src="./chartLegend.vue" lang="zh"></API>
diff --git a/nezha-docs/src/chart/chartChild/chartTimeSeries/chartTimeSeries.vue b/nezha-docs/src/chart/chartChild/chartTimeSeries/chartTimeSeries.vue
index 713a13427..818e84111 100644
--- a/nezha-docs/src/chart/chartChild/chartTimeSeries/chartTimeSeries.vue
+++ b/nezha-docs/src/chart/chartChild/chartTimeSeries/chartTimeSeries.vue
@@ -4,7 +4,22 @@ const props = withDefaults(defineProps<{
    * chart相关信息 主要是要里面的 id 以及 params
    */
   chartInfo?: {  },
-
+ /**
+   * chart数据
+   */
+ chartData?:  [],
+  /**
+   *  chart相应配置
+   */
+  chartOption?: {  },
+  /**
+   *  但是否显示全部数据
+   */
+  showAllData?: Boolean,
+  /**
+   *  dashboard 相关变量
+   */
+  globalVariables?: [],
 
 }>(), {
 
diff --git a/nezha-docs/src/chart/chartChild/chartTimeSeries/index.en-US.md b/nezha-docs/src/chart/chartChild/chartTimeSeries/index.en-US.md
index 925cf7a35..b92df969c 100644
--- a/nezha-docs/src/chart/chartChild/chartTimeSeries/index.en-US.md
+++ b/nezha-docs/src/chart/chartChild/chartTimeSeries/index.en-US.md
@@ -7,4 +7,13 @@ map:
 # 关联组件
 1. chart-legend legend 相关组件
 
+```vue
+  <div
+    ref="timeSeries-chart-box"
+>
+  <div class="chartId"></div>
+  <chart-legend></chart-legend>
+</div>
+```
+
 <API src="./chartTimeSeries.vue" lang="en"></API>
diff --git a/nezha-docs/src/chart/chartChild/chartTimeSeries/index.zh-CN.md b/nezha-docs/src/chart/chartChild/chartTimeSeries/index.zh-CN.md
index 01d1381b1..29299325c 100644
--- a/nezha-docs/src/chart/chartChild/chartTimeSeries/index.zh-CN.md
+++ b/nezha-docs/src/chart/chartChild/chartTimeSeries/index.zh-CN.md
@@ -7,4 +7,13 @@ map:
 # 关联组件
 1. chart-legend legend 相关组件
 
+```vue
+  <div
+    ref="timeSeries-chart-box"
+>
+  <div class="chartId"></div>
+  <chart-legend></chart-legend>
+</div>
+```
+
 <API src="./chartTimeSeries.vue" lang="zh"></API>
diff --git a/nezha-docs/src/chart/index.en-US.md b/nezha-docs/src/chart/index.en-US.md
index 098b749b7..dd48c1a8f 100644
--- a/nezha-docs/src/chart/index.en-US.md
+++ b/nezha-docs/src/chart/index.en-US.md
@@ -30,5 +30,11 @@ map:
 25. chartSankey 桑葚图
 26. chartFunnel 漏斗图
 
+# 备注
+大部分的组件props 跟chartTimeSeries 一致 
+
+下面只列举 chartTimeSeries 以及部分需要特殊注意的组件
+
+
 
 <API src="./chart.vue" lang="en"></API>
diff --git a/nezha-docs/src/chart/index.zh-CN.md b/nezha-docs/src/chart/index.zh-CN.md
index 217f1a432..37ac2cbc1 100644
--- a/nezha-docs/src/chart/index.zh-CN.md
+++ b/nezha-docs/src/chart/index.zh-CN.md
@@ -30,5 +30,10 @@ map:
 25. chartSankey 桑葚图
 26. chartFunnel 漏斗图
 
+# 备注
+大部分的组件props 跟chartTimeSeries 一致
+
+下面只列举 chartTimeSeries 以及部分需要特殊注意的组件
+
 
 <API src="./chart.vue" lang="zh"></API>