diff --git a/src/pages/demo/chart/demo/PieBase.vue b/src/pages/demo/chart/demo/PieBase.vue
new file mode 100644
index 00000000..8c4158ef
--- /dev/null
+++ b/src/pages/demo/chart/demo/PieBase.vue
@@ -0,0 +1,33 @@
+<template>
+  <Container type="ghost" :responsive="true">
+    <ChartDemoCard v-bind="card" @resize="$refs.chart.resize()">
+      <G2PieBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2PieBase>
+    </ChartDemoCard>
+  </Container>
+</template>
+
+<script>
+import publicMixin from './mixins/public'
+export default {
+  mixins: [
+    publicMixin
+  ],
+  data () {
+    return {
+      // 给卡片容器的参数
+      card: {
+        api: {
+          url: '/api/chart/G2Pie',
+          data: {
+            type: 'base'
+          }
+        }
+      },
+      // 给图表的参数
+      chart: {
+        // 图表设置
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/chart/demo/barBase.vue b/src/pages/demo/chart/demo/barBase.vue
new file mode 100644
index 00000000..15c3a586
--- /dev/null
+++ b/src/pages/demo/chart/demo/barBase.vue
@@ -0,0 +1,33 @@
+<template>
+  <Container type="ghost" :responsive="true">
+    <ChartDemoCard v-bind="card" @resize="$refs.chart.resize()">
+      <G2BarBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2BarBase>
+    </ChartDemoCard>
+  </Container>
+</template>
+
+<script>
+import publicMixin from './mixins/public'
+export default {
+  mixins: [
+    publicMixin
+  ],
+  data () {
+    return {
+      // 给卡片容器的参数
+      card: {
+        api: {
+          url: '/api/chart/G2Bar',
+          data: {
+            type: 'base'
+          }
+        }
+      },
+      // 给图表的参数
+      chart: {
+        // 图表设置
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/chart/demo/columnBase.vue b/src/pages/demo/chart/demo/columnBase.vue
new file mode 100644
index 00000000..0d24353f
--- /dev/null
+++ b/src/pages/demo/chart/demo/columnBase.vue
@@ -0,0 +1,33 @@
+<template>
+  <Container type="ghost" :responsive="true">
+    <ChartDemoCard v-bind="card" @resize="$refs.chart.resize()">
+      <G2ColumnBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2ColumnBase>
+    </ChartDemoCard>
+  </Container>
+</template>
+
+<script>
+import publicMixin from './mixins/public'
+export default {
+  mixins: [
+    publicMixin
+  ],
+  data () {
+    return {
+      // 给卡片容器的参数
+      card: {
+        api: {
+          url: '/api/chart/G2Column',
+          data: {
+            type: 'base'
+          }
+        }
+      },
+      // 给图表的参数
+      chart: {
+        // 图表设置
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/chart/demo/lineBase.vue b/src/pages/demo/chart/demo/lineBase.vue
new file mode 100644
index 00000000..8a49421c
--- /dev/null
+++ b/src/pages/demo/chart/demo/lineBase.vue
@@ -0,0 +1,33 @@
+<template>
+  <Container type="ghost" :responsive="true">
+    <ChartDemoCard v-bind="card" @resize="$refs.chart.resize()">
+      <G2LineBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2LineBase>
+    </ChartDemoCard>
+  </Container>
+</template>
+
+<script>
+import publicMixin from './mixins/public'
+export default {
+  mixins: [
+    publicMixin
+  ],
+  data () {
+    return {
+      // 给卡片容器的参数
+      card: {
+        api: {
+          url: '/api/chart/G2Line',
+          data: {
+            type: 'base'
+          }
+        }
+      },
+      // 给图表的参数
+      chart: {
+        // 图表设置
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/chart/demo/lineStep.vue b/src/pages/demo/chart/demo/lineStep.vue
new file mode 100644
index 00000000..4ae941ef
--- /dev/null
+++ b/src/pages/demo/chart/demo/lineStep.vue
@@ -0,0 +1,33 @@
+<template>
+  <Container type="ghost" :responsive="true">
+    <ChartDemoCard v-bind="card" @resize="$refs.chart.resize()">
+      <G2LineStep slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2LineStep>
+    </ChartDemoCard>
+  </Container>
+</template>
+
+<script>
+import publicMixin from './mixins/public'
+export default {
+  mixins: [
+    publicMixin
+  ],
+  data () {
+    return {
+      // 给卡片容器的参数
+      card: {
+        api: {
+          url: '/api/chart/G2Line',
+          data: {
+            type: 'step'
+          }
+        }
+      },
+      // 给图表的参数
+      chart: {
+        // 图表设置
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/chart/demo/nightingaleRoseBase.vue b/src/pages/demo/chart/demo/nightingaleRoseBase.vue
new file mode 100644
index 00000000..1cb749c9
--- /dev/null
+++ b/src/pages/demo/chart/demo/nightingaleRoseBase.vue
@@ -0,0 +1,33 @@
+<template>
+  <Container type="ghost" :responsive="true">
+    <ChartDemoCard v-bind="card" @resize="$refs.chart.resize()">
+      <G2NightingaleRoseBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2NightingaleRoseBase>
+    </ChartDemoCard>
+  </Container>
+</template>
+
+<script>
+import publicMixin from './mixins/public'
+export default {
+  mixins: [
+    publicMixin
+  ],
+  data () {
+    return {
+      // 给卡片容器的参数
+      card: {
+        api: {
+          url: '/api/chart/G2NightingaleRose',
+          data: {
+            type: 'base'
+          }
+        }
+      },
+      // 给图表的参数
+      chart: {
+        // 图表设置
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/chart/demo/radarBase.vue b/src/pages/demo/chart/demo/radarBase.vue
new file mode 100644
index 00000000..1c6ff713
--- /dev/null
+++ b/src/pages/demo/chart/demo/radarBase.vue
@@ -0,0 +1,33 @@
+<template>
+  <Container type="ghost" :responsive="true">
+    <ChartDemoCard v-bind="card" @resize="$refs.chart.resize()">
+      <G2RadarBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2RadarBase>
+    </ChartDemoCard>
+  </Container>
+</template>
+
+<script>
+import publicMixin from './mixins/public'
+export default {
+  mixins: [
+    publicMixin
+  ],
+  data () {
+    return {
+      // 给卡片容器的参数
+      card: {
+        api: {
+          url: '/api/chart/G2Radar',
+          data: {
+            type: 'base'
+          }
+        }
+      },
+      // 给图表的参数
+      chart: {
+        // 图表设置
+      }
+    }
+  }
+}
+</script>
diff --git a/src/router/menu/_chart.js b/src/router/menu/_chart.js
index 59909a0d..cb8e132d 100644
--- a/src/router/menu/_chart.js
+++ b/src/router/menu/_chart.js
@@ -1,3 +1,16 @@
+const maker = (name) => {
+  return {
+    title: '面积图',
+    icon: 'file-o',
+    path: `demo/${name}`,
+    name: `demo-chart-demo-${name}`,
+    meta: {
+      requiresAuth: true
+    },
+    component: resolve => { require([`@/pages/demo/chart/demo/${name}.vue`], resolve) }
+  }
+}
+
 // [图表] 菜单
 export const menu = {
   title: '图表',
@@ -24,16 +37,14 @@ export const menu = {
       title: '单独演示',
       icon: 'file-o',
       children: [
-        {
-          title: '面积图',
-          icon: 'file-o',
-          path: 'demo/areaBase',
-          name: 'demo-chart-demo-areaBase',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/chart/demo/areaBase.vue'], resolve) }
-        }
+        maker('areaBase'),
+        maker('barBase'),
+        maker('columnBase'),
+        maker('lineBase'),
+        maker('lineStep'),
+        maker('nightingaleRoseBase'),
+        maker('pieBase'),
+        maker('radarBase')
       ]
     }
   ]