diff --git a/src/pages/demo/chart/_index/index.vue b/src/pages/demo/chart/_index/index.vue
deleted file mode 100644
index 8c007185..00000000
--- a/src/pages/demo/chart/_index/index.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <Container type="ghost" :responsive="true" class="demo-chart-index">
-    <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
-      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
-          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]"></G2LineBase>
-        </el-card>
-      </GridItem>
-      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
-          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]"></G2LineStep>
-        </el-card>
-      </GridItem>
-      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
-          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]"></G2ColumnBase>
-        </el-card>
-      </GridItem>
-      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
-          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]"></G2BarBase>
-        </el-card>
-      </GridItem>
-      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
-          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]"></G2PieBase>
-        </el-card>
-      </GridItem>
-      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
-          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
-        </el-card>
-      </GridItem>
-      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
-          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
-        </el-card>
-      </GridItem>
-      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
-          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]"></G2AreaBase>
-        </el-card>
-      </GridItem>
-    </GridLayout>
-  </Container>
-</template>
-
-<script>
-import ChartCardHeader from './components/ChartCardHeader'
-export default {
-  components: {
-    ChartCardHeader
-  },
-  data () {
-    return {
-      chart: [
-        {
-          api: {url: '/api/chart/G2Line', data: {type: 'base'}},
-          refName: 'G2LineBase',
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Line', data: {type: 'step'}},
-          refName: 'G2LineStep',
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Column', data: {type: 'base'}},
-          refName: 'G2ColumnBase',
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
-          refName: 'G2BarBase',
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
-          refName: 'G2PieBase',
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
-          refName: 'G2NightingaleRoseBase',
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
-          refName: 'G2RadarBase',
-          data: []
-        },
-        {
-          api: {url: '/api/chart/G2Area', data: {type: 'base'}},
-          refName: 'G2AreaBase',
-          data: []
-        }
-      ],
-      layout: {
-        // 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
-        layout: [
-          {'x': 0, 'y': 0, 'w': 4, 'h': 7, 'i': '0'},
-          {'x': 4, 'y': 0, 'w': 4, 'h': 7, 'i': '1'},
-          {'x': 8, 'y': 0, 'w': 4, 'h': 7, 'i': '2'},
-          {'x': 0, 'y': 7, 'w': 4, 'h': 7, 'i': '3'},
-          {'x': 4, 'y': 7, 'w': 4, 'h': 7, 'i': '4'},
-          {'x': 8, 'y': 7, 'w': 4, 'h': 7, 'i': '5'},
-          {'x': 0, 'y': 14, 'w': 4, 'h': 7, 'i': '6'},
-          {'x': 4, 'y': 14, 'w': 4, 'h': 7, 'i': '7'}
-        ],
-        colNum: 12,
-        rowHeight: 30,
-        isDraggable: true,
-        isResizable: true,
-        isMirrored: false,
-        verticalCompact: true,
-        margin: [10, 10],
-        useCssTransforms: true
-      }
-    }
-  },
-  mounted () {
-    // 请求图表数据
-    this.syncData()
-  },
-  methods: {
-    // 请求图表数据
-    syncData () {
-      this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
-        .then(this.$axios.spread((...res) => {
-          res.forEach((e, index) => {
-            this.chart[index].data = e
-          })
-        }))
-    },
-    // 布局组件发生变化
-    layoutUpdatedHandler (newLayout) {
-      console.group('layoutUpdatedHandler')
-      newLayout.forEach(e => {
-        console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
-      })
-      console.groupEnd()
-    },
-    // 改变尺寸完成
-    handleResized (name) {
-      this.$nextTick(() => {
-        this.$refs[name].resize()
-      })
-    },
-    // 用户触发了卡片右上角的刷新按钮
-    handleRefreshData (index) {
-      const api = this.chart[index].api
-      this.$axios.post(api.url, api.data)
-        .then(res => {
-          this.chart[index].data = res
-        })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import './style.scss';
-</style>
diff --git a/src/pages/demo/chart/_index/components/ChartCardHeader.vue b/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
similarity index 100%
rename from src/pages/demo/chart/_index/components/ChartCardHeader.vue
rename to src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
diff --git a/src/pages/demo/chart/dynamicSize/index.vue b/src/pages/demo/chart/dynamicSize/index.vue
index 34dd446c..8c007185 100644
--- a/src/pages/demo/chart/dynamicSize/index.vue
+++ b/src/pages/demo/chart/dynamicSize/index.vue
@@ -1,3 +1,179 @@
 <template>
-  <Container></Container>
+  <Container type="ghost" :responsive="true" class="demo-chart-index">
+    <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
+          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]"></G2LineBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
+          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]"></G2LineStep>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
+          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]"></G2ColumnBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
+          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]"></G2BarBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
+          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]"></G2PieBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
+          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
+          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
+          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]"></G2AreaBase>
+        </el-card>
+      </GridItem>
+    </GridLayout>
+  </Container>
 </template>
+
+<script>
+import ChartCardHeader from './components/ChartCardHeader'
+export default {
+  components: {
+    ChartCardHeader
+  },
+  data () {
+    return {
+      chart: [
+        {
+          api: {url: '/api/chart/G2Line', data: {type: 'base'}},
+          refName: 'G2LineBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Line', data: {type: 'step'}},
+          refName: 'G2LineStep',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Column', data: {type: 'base'}},
+          refName: 'G2ColumnBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
+          refName: 'G2BarBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
+          refName: 'G2PieBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
+          refName: 'G2NightingaleRoseBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
+          refName: 'G2RadarBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Area', data: {type: 'base'}},
+          refName: 'G2AreaBase',
+          data: []
+        }
+      ],
+      layout: {
+        // 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
+        layout: [
+          {'x': 0, 'y': 0, 'w': 4, 'h': 7, 'i': '0'},
+          {'x': 4, 'y': 0, 'w': 4, 'h': 7, 'i': '1'},
+          {'x': 8, 'y': 0, 'w': 4, 'h': 7, 'i': '2'},
+          {'x': 0, 'y': 7, 'w': 4, 'h': 7, 'i': '3'},
+          {'x': 4, 'y': 7, 'w': 4, 'h': 7, 'i': '4'},
+          {'x': 8, 'y': 7, 'w': 4, 'h': 7, 'i': '5'},
+          {'x': 0, 'y': 14, 'w': 4, 'h': 7, 'i': '6'},
+          {'x': 4, 'y': 14, 'w': 4, 'h': 7, 'i': '7'}
+        ],
+        colNum: 12,
+        rowHeight: 30,
+        isDraggable: true,
+        isResizable: true,
+        isMirrored: false,
+        verticalCompact: true,
+        margin: [10, 10],
+        useCssTransforms: true
+      }
+    }
+  },
+  mounted () {
+    // 请求图表数据
+    this.syncData()
+  },
+  methods: {
+    // 请求图表数据
+    syncData () {
+      this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
+        .then(this.$axios.spread((...res) => {
+          res.forEach((e, index) => {
+            this.chart[index].data = e
+          })
+        }))
+    },
+    // 布局组件发生变化
+    layoutUpdatedHandler (newLayout) {
+      console.group('layoutUpdatedHandler')
+      newLayout.forEach(e => {
+        console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
+      })
+      console.groupEnd()
+    },
+    // 改变尺寸完成
+    handleResized (name) {
+      this.$nextTick(() => {
+        this.$refs[name].resize()
+      })
+    },
+    // 用户触发了卡片右上角的刷新按钮
+    handleRefreshData (index) {
+      const api = this.chart[index].api
+      this.$axios.post(api.url, api.data)
+        .then(res => {
+          this.chart[index].data = res
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/pages/demo/chart/_index/style.scss b/src/pages/demo/chart/dynamicSize/style.scss
similarity index 100%
rename from src/pages/demo/chart/_index/style.scss
rename to src/pages/demo/chart/dynamicSize/style.scss