diff --git a/src/pages/demo/chart/demo/areaBase.vue b/src/pages/demo/chart/demo/areaBase.vue
index d6665585..71425f03 100644
--- a/src/pages/demo/chart/demo/areaBase.vue
+++ b/src/pages/demo/chart/demo/areaBase.vue
@@ -1,5 +1,14 @@
 <template>
   <Container type="ghost" :responsive="true">
-    Hello
+    <ChartDemoCard></ChartDemoCard>
   </Container>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import publicMixin from './mixins/public'
+export default {
+  mixins: [
+    publicMixin
+  ]
+}
+</script>
diff --git a/src/pages/demo/chart/demo/components/ChartDemoCard.vue b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
new file mode 100644
index 00000000..d37c1028
--- /dev/null
+++ b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
@@ -0,0 +1,5 @@
+<template>
+  <el-card>
+    Hello
+  </el-card>
+</template>
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..ca77152e
--- /dev/null
+++ b/src/pages/demo/chart/demo/mixins/public.js
@@ -0,0 +1,7 @@
+import ChartDemoCard from '../components/ChartDemoCard.vue'
+
+export default {
+  components: {
+    ChartDemoCard
+  }
+}