diff --git a/src/pages/demo/chart/demo/areaBase.vue b/src/pages/demo/chart/demo/areaBase.vue
index 97451ecb..3c32555b 100644
--- a/src/pages/demo/chart/demo/areaBase.vue
+++ b/src/pages/demo/chart/demo/areaBase.vue
@@ -1,9 +1,7 @@
 <template>
   <Container type="ghost" :responsive="true">
-    <ChartDemoCard v-bind="card">
-      <template slot-scope="{data}">
-        <G2AreaBase :data="data" v-bind="chart"></G2AreaBase>
-      </template>
+    <ChartDemoCard v-bind="card" @resize="$refs.chart.resize()">
+      <G2AreaBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2AreaBase>
     </ChartDemoCard>
   </Container>
 </template>
diff --git a/src/pages/demo/chart/demo/components/ChartDemoCard.vue b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
index 8ee3aa0e..ec55b7e8 100644
--- a/src/pages/demo/chart/demo/components/ChartDemoCard.vue
+++ b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
@@ -1,7 +1,10 @@
 <template>
   <el-card>
     <div slot="header">
-      <el-button @click="syncData">加载数据</el-button>
+      <el-button size="mini" @click="syncData">加载数据</el-button>
+      <el-radio-group v-model="height" size="mini">
+        <el-radio-button v-for="(item, index) in heightOptions" :key="index" :label="item">{{item}}px</el-radio-button>
+      </el-radio-group>
     </div>
     <div :style="style">
       <slot :data="data"></slot>
@@ -21,7 +24,8 @@ export default {
   data () {
     return {
       data: [],
-      height: 300
+      height: 300,
+      heightOptions: [300, 400, 500, 600]
     }
   },
   computed: {
@@ -31,6 +35,11 @@ export default {
       }
     }
   },
+  watch: {
+    style () {
+      this.resize()
+    }
+  },
   mounted () {
     // 自动请求一次数据
     this.syncData()
@@ -45,7 +54,9 @@ export default {
     },
     // 重新适应大小
     resize () {
-      // this.$refs.chart.resize()
+      this.$nextTick(() => {
+        this.$emit('resize')
+      })
     }
   }
 }