diff --git a/src/pages/demo/chart/demo/areaBase.vue b/src/pages/demo/chart/demo/areaBase.vue
index 71425f03..c0752004 100644
--- a/src/pages/demo/chart/demo/areaBase.vue
+++ b/src/pages/demo/chart/demo/areaBase.vue
@@ -1,6 +1,10 @@
 <template>
   <Container type="ghost" :responsive="true">
-    <ChartDemoCard></ChartDemoCard>
+    <ChartDemoCard>
+      <template slot-scope="props">
+        <G2AreaBase :data="props.data" v-bind="chart"></G2AreaBase>
+      </template>
+    </ChartDemoCard>
   </Container>
 </template>
 
@@ -9,6 +13,13 @@ import publicMixin from './mixins/public'
 export default {
   mixins: [
     publicMixin
-  ]
+  ],
+  data () {
+    return {
+      chart: {
+        // 图表设置
+      }
+    }
+  }
 }
 </script>
diff --git a/src/pages/demo/chart/demo/components/ChartDemoCard.vue b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
index d37c1028..2205cb6a 100644
--- a/src/pages/demo/chart/demo/components/ChartDemoCard.vue
+++ b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
@@ -1,5 +1,25 @@
 <template>
   <el-card>
-    Hello
+    <div :style="style">
+      <slot :data="data"></slot>
+    </div>
   </el-card>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+      data: [],
+      height: 300
+    }
+  },
+  computed: {
+    style () {
+      return {
+        height: this.height + 'px'
+      }
+    }
+  }
+}
+</script>