diff --git a/src/pages/demo/chart/demo/areaBase.vue b/src/pages/demo/chart/demo/areaBase.vue
index 98a2b178..4a7fa911 100644
--- a/src/pages/demo/chart/demo/areaBase.vue
+++ b/src/pages/demo/chart/demo/areaBase.vue
@@ -1,5 +1,42 @@
 <template>
   <Container type="ghost" :responsive="true">
-    demo
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <ChartDemoControl
+          @sync="syncData"
+          :height.sync="height">
+        </ChartDemoControl>
+      </el-col>
+      <el-col :span="18">
+        <el-card>
+          <div :style="style">
+            <G2AreaBase ref="chart" v-bind="chart"></G2AreaBase>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
   </Container>
 </template>
+
+<script>
+import publicMixin from './mixins/public'
+export default {
+  mixins: [
+    publicMixin
+  ],
+  data () {
+    return {
+      api: {
+        url: '/api/chart/G2Area',
+        data: {
+          type: 'base'
+        }
+      },
+      chart: {
+        data: []
+      }
+    }
+  }
+}
+</script>
+
diff --git a/src/pages/demo/chart/demo/components/ChartDemoControl.vue b/src/pages/demo/chart/demo/components/ChartDemoControl.vue
new file mode 100644
index 00000000..e4b977a4
--- /dev/null
+++ b/src/pages/demo/chart/demo/components/ChartDemoControl.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-card>
+    <el-button @click="$emit('sync')">
+      <Icon name="refresh"></Icon>
+      重新载入数据
+    </el-button>
+    <p>改变容器高度</p>
+    <el-radio-group v-model="currentHeight" size="small">
+      <el-radio-button v-for="(item, index) in heightOptions" :key="index" :label="item">{{item}}</el-radio-button>
+    </el-radio-group>
+  </el-card>
+</template>
+
+<script>
+export default {
+  props: {
+    height: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      heightOptions: [300, 400, 500, 600],
+      currentHeight: 0
+    }
+  },
+  created () {
+    this.currentHeight = this.height
+  },
+  watch: {
+    currentHeight (value) {
+      if (value !== this.height) {
+        this.$emit('update:height', value)
+      }
+    }
+  }
+}
+</script>
+
diff --git a/src/pages/demo/chart/demo/mixins/public.js b/src/pages/demo/chart/demo/mixins/public.js
new file mode 100644
index 00000000..45c0b2ba
--- /dev/null
+++ b/src/pages/demo/chart/demo/mixins/public.js
@@ -0,0 +1,41 @@
+import ChartDemoControl from '../components/ChartDemoControl.vue'
+export default {
+  components: {
+    ChartDemoControl
+  },
+  data () {
+    return {
+      height: 300
+    }
+  },
+  mounted () {
+    this.syncData()
+  },
+  computed: {
+    style () {
+      return {
+        height: this.height + 'px'
+      }
+    }
+  },
+  watch: {
+    style () {
+      this.$nextTick(() => {
+        this.resize()
+      })
+    }
+  },
+  methods: {
+    // 请求数据
+    syncData () {
+      this.$axios.post(this.api.url, this.api.data)
+        .then(res => {
+          this.chart.data = res
+        })
+    },
+    // 重新适应大小
+    resize () {
+      this.$refs.chart.resize()
+    }
+  }
+}
diff --git a/src/router/menu/_chart.js b/src/router/menu/_chart.js
index 517693f9..59909a0d 100644
--- a/src/router/menu/_chart.js
+++ b/src/router/menu/_chart.js
@@ -7,9 +7,6 @@ export const menu = {
     requiresAuth: true
   },
   component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
-  redirect: {
-    name: 'demo-chart-index'
-  },
   children: [
     // 所有
     {