diff --git a/src/pages/demo/chart/demo/areaBase.vue b/src/pages/demo/chart/demo/areaBase.vue
index c0752004..97451ecb 100644
--- a/src/pages/demo/chart/demo/areaBase.vue
+++ b/src/pages/demo/chart/demo/areaBase.vue
@@ -1,8 +1,8 @@
 <template>
   <Container type="ghost" :responsive="true">
-    <ChartDemoCard>
-      <template slot-scope="props">
-        <G2AreaBase :data="props.data" v-bind="chart"></G2AreaBase>
+    <ChartDemoCard v-bind="card">
+      <template slot-scope="{data}">
+        <G2AreaBase :data="data" v-bind="chart"></G2AreaBase>
       </template>
     </ChartDemoCard>
   </Container>
@@ -16,6 +16,16 @@ export default {
   ],
   data () {
     return {
+      // 给卡片容器的参数
+      card: {
+        api: {
+          url: '/api/chart/G2Area',
+          data: {
+            type: 'base'
+          }
+        }
+      },
+      // 给图表的参数
       chart: {
         // 图表设置
       }
diff --git a/src/pages/demo/chart/demo/components/ChartDemoCard.vue b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
index 2205cb6a..8ee3aa0e 100644
--- a/src/pages/demo/chart/demo/components/ChartDemoCard.vue
+++ b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
@@ -1,5 +1,8 @@
 <template>
   <el-card>
+    <div slot="header">
+      <el-button @click="syncData">加载数据</el-button>
+    </div>
     <div :style="style">
       <slot :data="data"></slot>
     </div>
@@ -8,6 +11,13 @@
 
 <script>
 export default {
+  props: {
+    api: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
   data () {
     return {
       data: [],
@@ -20,6 +30,23 @@ export default {
         height: this.height + 'px'
       }
     }
+  },
+  mounted () {
+    // 自动请求一次数据
+    this.syncData()
+  },
+  methods: {
+    // 请求数据
+    syncData () {
+      this.$axios.post(this.api.url, this.api.data)
+        .then(res => {
+          this.data = res
+        })
+    },
+    // 重新适应大小
+    resize () {
+      // this.$refs.chart.resize()
+    }
   }
 }
 </script>