diff --git a/src/pages/demo/chart/index/index.vue b/src/pages/demo/chart/index/index.vue
index 5ef64d1f..83bbe7f8 100644
--- a/src/pages/demo/chart/index/index.vue
+++ b/src/pages/demo/chart/index/index.vue
@@ -9,82 +9,17 @@
 </template>
 
 <script>
+import layout from './mixins/layout'
+import chart from './mixins/chart'
 export default {
-  data () {
-    return {
-      layout: {
-        layout: [
-          {'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
-          {'x': 8, 'y': 9, 'w': 4, 'h': 7, 'i': '1'},
-          {'x': 0, 'y': 9, 'w': 4, 'h': 7, 'i': '2'},
-          {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '3'},
-          {'x': 4, 'y': 9, 'w': 4, 'h': 7, 'i': '4'}
-        ],
-        colNum: 12,
-        rowHeight: 30,
-        isDraggable: true,
-        isResizable: true,
-        isMirrored: false,
-        verticalCompact: true,
-        margin: [10, 10],
-        useCssTransforms: true
-      },
-      // 数据
-      G2Line1: []
-    }
-  },
-  mounted () {
-    this.syncData()
-  },
-  methods: {
-    // 请求图表数据
-    syncData () {
-      const api = [
-        {url: '/api/chart/G2Line', data: {code: 1}}
-      ]
-      this.$axios.all(api.map(e => this.$axios.post(e.url, e.data)))
-        .then(this.$axios.spread((G2Line1) => {
-          this.G2Line1 = G2Line1
-        }))
-    },
-    // 改变尺寸
-    resizeHandler (name) {
-      this.$nextTick(() => {
-        this.$refs[name].resize()
-      })
-    },
-    // 改变尺寸完成
-    resizedHandler (name) {
-      this.$nextTick(() => {
-        this.$refs[name].resize()
-      })
-    }
-  }
+  mixins: [
+    layout,
+    chart
+  ]
 }
 </script>
 
 <style lang="scss">
-@import '~@/assets/style/public.scss';
-.demo-chart-index {
-  .vue-grid-layout {
-    margin: -10px;
-    .el-card {
-      @extend %unable-select;
-      height: 100%;
-      .el-card__body {
-        height: 100%;
-        padding: 0px;
-      }
-    }
-    .vue-resizable-handle {
-      bottom: 6px;
-      right: 6px;
-      opacity: .3;
-      &:hover{
-        opacity: 1;
-      }
-    }
-  }
-}
+@import './style.scss';
 </style>
 
diff --git a/src/pages/demo/chart/index/mixins/chart.js b/src/pages/demo/chart/index/mixins/chart.js
new file mode 100644
index 00000000..7de2e172
--- /dev/null
+++ b/src/pages/demo/chart/index/mixins/chart.js
@@ -0,0 +1,24 @@
+export default {
+  data () {
+    return {
+      // 数据
+      G2Line1: []
+    }
+  },
+  mounted () {
+    // 请求图表数据
+    this.syncData()
+  },
+  methods: {
+    // 请求图表数据
+    syncData () {
+      const api = [
+        {url: '/api/chart/G2Line', data: {code: 1}}
+      ]
+      this.$axios.all(api.map(e => this.$axios.post(e.url, e.data)))
+        .then(this.$axios.spread((G2Line1) => {
+          this.G2Line1 = G2Line1
+        }))
+    }
+  }
+}
diff --git a/src/pages/demo/chart/index/mixins/layout.js b/src/pages/demo/chart/index/mixins/layout.js
new file mode 100644
index 00000000..66028cd8
--- /dev/null
+++ b/src/pages/demo/chart/index/mixins/layout.js
@@ -0,0 +1,37 @@
+export default {
+  data () {
+    return {
+      layout: {
+        layout: [
+          {'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
+          {'x': 8, 'y': 9, 'w': 4, 'h': 7, 'i': '1'},
+          {'x': 0, 'y': 9, 'w': 4, 'h': 7, 'i': '2'},
+          {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '3'},
+          {'x': 4, 'y': 9, 'w': 4, 'h': 7, 'i': '4'}
+        ],
+        colNum: 12,
+        rowHeight: 30,
+        isDraggable: true,
+        isResizable: true,
+        isMirrored: false,
+        verticalCompact: true,
+        margin: [10, 10],
+        useCssTransforms: true
+      }
+    }
+  },
+  methods: {
+    // 改变尺寸
+    resizeHandler (name) {
+      this.$nextTick(() => {
+        this.$refs[name].resize()
+      })
+    },
+    // 改变尺寸完成
+    resizedHandler (name) {
+      this.$nextTick(() => {
+        this.$refs[name].resize()
+      })
+    }
+  }
+}
diff --git a/src/pages/demo/chart/index/style.scss b/src/pages/demo/chart/index/style.scss
new file mode 100644
index 00000000..3651a2bf
--- /dev/null
+++ b/src/pages/demo/chart/index/style.scss
@@ -0,0 +1,22 @@
+@import '~@/assets/style/public.scss';
+.demo-chart-index {
+  .vue-grid-layout {
+    margin: -10px;
+    .el-card {
+      @extend %unable-select;
+      height: 100%;
+      .el-card__body {
+        height: 100%;
+        padding: 0px;
+      }
+    }
+    .vue-resizable-handle {
+      bottom: 6px;
+      right: 6px;
+      opacity: .3;
+      &:hover{
+        opacity: 1;
+      }
+    }
+  }
+}
\ No newline at end of file