diff --git a/packages/charts-vue/components/grid-layout/src/gridlayoutwrapper.component.tsx b/packages/charts-vue/components/grid-layout/src/gridlayoutwrapper.component.tsx
index 100507f718ee488ed64412ec52221fa8ec1cce91..9071d475fa108b210bd7951a1e3f0ac437e68601 100644
--- a/packages/charts-vue/components/grid-layout/src/gridlayoutwrapper.component.tsx
+++ b/packages/charts-vue/components/grid-layout/src/gridlayoutwrapper.component.tsx
@@ -42,6 +42,8 @@ export default defineComponent({
     setup(props: GridLayoutProps, context: SetupContext) {
         const model: ShallowRef<LayoutItem[]> = shallowRef([...props.layout]);
 
+        const { slots } = context;
+
         watch(
             () => props.layout,
             (newLayout) => {
@@ -147,7 +149,7 @@ export default defineComponent({
                             onMove={moveEvent}
                             onMoved={movedEvent}
                         >
-                            <slot name="item" item={item}></slot>
+                            { slots.default && slots.default({item}) }
                         </GridItem>
                     ))
                 }
diff --git a/packages/charts-vue/components/index.ts b/packages/charts-vue/components/index.ts
index bf273ba4d2b8a92eb467198c7f9d406b0eba2039..824a1ee918bd6d17e54ceebda40151f73e0947aa 100644
--- a/packages/charts-vue/components/index.ts
+++ b/packages/charts-vue/components/index.ts
@@ -40,6 +40,7 @@ export default {
             .use(FChartsScatter)
             .use(FChartsCombined)
             .use(FChartsProcessGauge)
+            .use(FChartsProcessGauge)
             .use(FChartsBar)
             .use(FChartsRadar)
             .use(FChartsFunnel)
diff --git a/packages/charts-vue/demos/grid-layout/grid-layout-charts.vue b/packages/charts-vue/demos/grid-layout/grid-layout-charts.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb9e6ddb923e387161e6d014a54dff586220090a
--- /dev/null
+++ b/packages/charts-vue/demos/grid-layout/grid-layout-charts.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="container">
+      <f-grid-layout-wrapper 
+        v-model:layout="layout" 
+        @layoutUpdated="onLayoutUpdated"
+        @itemResized="onItemResized">
+        <template #default="{item}">
+          <div class="grid-item">
+            <f-charts-line v-if="item.type=='line'"
+            :series="item.series"
+            :xAxis="item.xAxis"
+            :yAxis="item.yAxis"
+            :tooltip="item.tooltip"
+            :width="item.width"
+            :height="item.height"></f-charts-line>
+            <f-charts-line v-if="item.type=='area'"
+            :series="item.series"
+            :xAxis="item.xAxis"
+            :yAxis="item.yAxis"
+            :tooltip="item.tooltip"
+            :width="item.width"
+            :height="item.height"></f-charts-line>
+            <f-charts-pie v-if="item.type=='pie'"
+            :series="item.series"
+            :width="item.width"
+            :height="item.height"></f-charts-pie>
+            <f-charts-scatter  v-if="item.type=='scatter'"
+            :series="item.series"
+            :xAxis="item.xAxis"
+            :yAxis="item.yAxis"
+            :width="item.width"
+            :height="item.height"></f-charts-scatter>
+          </div>
+        </template>
+      </f-grid-layout-wrapper>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 定义初始布局数据
+const layout = ref([
+  { x: 0, y: 0, w: 3, h: 4, i: '1', type: 'line', series: [
+    {
+      name: '销量',
+      data: [150, 230, 224, 218, 135, 147, 260]
+    }
+  ], xAxis: {
+    type: 'category',
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+  }, yAxis: { type: 'value' }, tooltip: { valueFormatter: (value) => `${value} 件` }, width: '100%', height: '100%' },
+  { x: 3, y: 1, w: 3, h: 4, i: '2', type: 'area', series: [
+        {
+          areaStyle: {},
+          name: '销量',
+          data: [150, 230, 224, 218, 135, 147, 260]
+        }
+      ], xAxis: {
+    type: 'category',
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+  }, yAxis: { type: 'value' }, tooltip: { valueFormatter: (value) => `${value} 件` }, width: '100%', height: '100%' },
+  { x: 0, y: 5, w: 3, h: 4, i: '3', type: 'pie', series: [
+    {
+      name: '销量',
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' }
+      ]
+    }
+  ], width: '100%', height: '100%'},
+  { x: 3, y: 5, w: 3, h: 4, i: '4', type: 'scatter', series: [
+    {
+      areaStyle: {},
+      name: '1990',
+      symbolSize: function (data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      data: [
+        [28604, 77, 17096869, 'Australia', 1990],
+        [31163, 77.4, 27662440, 'Canada', 1990],
+        [1516, 68, 1154605773, 'China', 1990],
+        [13670, 74.7, 10582082, 'Cuba', 1990],
+        [28599, 75, 4986705, 'Finland', 1990],
+        [29476, 77.1, 56943299, 'France', 1990],
+        [31476, 75.4, 78958237, 'Germany', 1990],
+        [28666, 78.1, 254830, 'Iceland', 1990],
+        [1777, 57.7, 870601776, 'India', 1990],
+        [29550, 79.1, 122249285, 'Japan', 1990],
+        [2076, 67.9, 20194354, 'North Korea', 1990],
+        [12087, 72, 42972254, 'South Korea', 1990],
+        [24021, 75.4, 3397534, 'New Zealand', 1990],
+        [43296, 76.8, 4240375, 'Norway', 1990],
+        [10088, 70.8, 38195258, 'Poland', 1990],
+        [19349, 69.6, 147568552, 'Russia', 1990],
+        [10670, 67.3, 53994605, 'Turkey', 1990],
+        [26424, 75.7, 57110117, 'United Kingdom', 1990],
+        [37062, 75.4, 252847810, 'United States', 1990]
+      ]
+    },
+    {
+      areaStyle: {},
+      name: '2015',
+      symbolSize: function (data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      data: [
+        [44056, 81.8, 23968973, 'Australia', 2015],
+        [43294, 81.7, 35939927, 'Canada', 2015],
+        [13334, 76.9, 1376048943, 'China', 2015],
+        [21291, 78.5, 11389562, 'Cuba', 2015],
+        [38923, 80.8, 5503457, 'Finland', 2015],
+        [37599, 81.9, 64395345, 'France', 2015],
+        [44053, 81.1, 80688545, 'Germany', 2015],
+        [42182, 82.8, 329425, 'Iceland', 2015],
+        [5903, 66.8, 1311050527, 'India', 2015],
+        [36162, 83.5, 126573481, 'Japan', 2015],
+        [1390, 71.4, 25155317, 'North Korea', 2015],
+        [34644, 80.7, 50293439, 'South Korea', 2015],
+        [34186, 80.6, 4528526, 'New Zealand', 2015],
+        [64304, 81.6, 5210967, 'Norway', 2015],
+        [24787, 77.3, 38611794, 'Poland', 2015],
+        [23038, 73.13, 143456918, 'Russia', 2015],
+        [19360, 76.5, 78665830, 'Turkey', 2015],
+        [38225, 81.4, 64715810, 'United Kingdom', 2015],
+        [53354, 79.1, 321773631, 'United States', 2015]
+      ]
+    }
+  ], xAxis: {
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  yAxis: {
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    },
+    scale: true
+  }, width: '100%', height: '100%'}
+])
+
+// 处理布局更新事件
+const onLayoutUpdated = (newLayout: []) => {
+  console.log('Layout updated:', newLayout)
+}
+
+// 处理单个元素尺寸变化
+const onItemResized = (item: any) => {
+  console.log('Item resized:', item)
+}
+</script>
+
+<style>
+.container {
+  /* display: block !important;
+  height: '500px'; */
+}
+.grid-item {
+  background: #FFF !important;
+  height: 100%
+}
+</style>
\ No newline at end of file
diff --git a/packages/charts-vue/demos/grid-layout/grid-layout.vue b/packages/charts-vue/demos/grid-layout/grid-layout.vue
index 590975a7121d5aaa85cd03b016a0632bf64337f9..a058d19397e487d5f8fd7cf55f7a20b3d67efe85 100644
--- a/packages/charts-vue/demos/grid-layout/grid-layout.vue
+++ b/packages/charts-vue/demos/grid-layout/grid-layout.vue
@@ -4,7 +4,7 @@
         v-model:layout="layout" 
         @layoutUpdated="onLayoutUpdated"
         @itemResized="onItemResized">
-        <template #item="{ item }">
+        <template #default="{item}">
           <div class="grid-item">
             <h3>{{ item.title }}</h3>
             <p>{{ item.content }}</p>
@@ -19,9 +19,9 @@ import { ref } from 'vue';
 
 // 定义初始布局数据
 const layout = ref([
-  { x: 0, y: 0, w: 2, h: 2, i: '1', title: 'Item 1', content: 'Content 1' },
-  { x: 2, y: 1, w: 2, h: 4, i: '2', title: 'Item 2', content: 'Content 2' },
-  { x: 2, y: 2, w: 2, h: 5, i: '3', title: 'Item 2', content: 'Content 2' }
+  { x: 0, y: 0, w: 3, h: 5, i: '1', title: 'Item 1', content: 'Content 1' },
+  { x: 3, y: 1, w: 3, h: 5, i: '2', title: 'Item 2', content: 'Content 2' },
+  { x: 0, y: 2, w: 3, h: 5, i: '3', title: 'Item 3', content: 'Content 2' }
 ])
 
 // 处理布局更新事件
@@ -37,7 +37,7 @@ const onItemResized = (item: any) => {
 
 <style>
 .container {
-  display: block !important;
-  height: '100vh';
+  /* display: block !important;
+  height: '500px'; */
 }
 </style>
\ No newline at end of file
diff --git a/packages/charts-vue/docs/components/grid-layout/index.md b/packages/charts-vue/docs/components/grid-layout/index.md
index 5ac826066d761af7ab975a86b18db92ec47f030a..19ae260addebcc0c257b0c5da16b5544c9f8f85d 100644
--- a/packages/charts-vue/docs/components/grid-layout/index.md
+++ b/packages/charts-vue/docs/components/grid-layout/index.md
@@ -2,12 +2,22 @@
 
 GridLayout 组件提供了栅栏式、响应式布局。
 
-## 基本用法
+<!-- ## 基本用法 -->
 
-:::vdemo
+<!-- :::vdemo
 
 ```vue
 {demos/grid-layout/grid-layout.vue}
 ```
 
+::: -->
+
+## 小部件用法
+
+:::vdemo
+
+```vue
+{demos/grid-layout/grid-layout-charts.vue}
+```
+
 :::
diff --git a/packages/charts-vue/docs/guide/quick-start/index.md b/packages/charts-vue/docs/guide/quick-start/index.md
index cf6e73962bf8e197d2dfc62d6328a49b24a68225..bca406550058a3b19d0bfaab99f8e47e06864b96 100644
--- a/packages/charts-vue/docs/guide/quick-start/index.md
+++ b/packages/charts-vue/docs/guide/quick-start/index.md
@@ -30,6 +30,6 @@ createApp(App).use(Farris).mount('#app');
 
 ```vue
 <template>
-    <f-input-group></f-input-group>
+    <f-grid-layout-wrapper></f-grid-layout-wrapper>
 </template>
 ```