diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue
index 4c2a0bbd..4b1bd499 100644
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -4,8 +4,10 @@
 
 <script>
 import echarts from 'echarts'
+import resize from './mixins/resize'
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue
index e8dce6da..6ca7611f 100644
--- a/src/components/Charts/lineMarker.vue
+++ b/src/components/Charts/lineMarker.vue
@@ -4,8 +4,10 @@
 
 <script>
 import echarts from 'echarts'
+import resize from './mixins/resize'
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
diff --git a/src/components/Charts/mixChart.vue b/src/components/Charts/mixChart.vue
index 6454dd36..be382be0 100644
--- a/src/components/Charts/mixChart.vue
+++ b/src/components/Charts/mixChart.vue
@@ -4,8 +4,10 @@
 
 <script>
 import echarts from 'echarts'
+import resize from './mixins/resize'
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -31,7 +33,6 @@ export default {
   },
   mounted() {
     this.initChart()
-    this.chart = null
   },
   beforeDestroy() {
     if (!this.chart) {
diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js
new file mode 100644
index 00000000..254e9052
--- /dev/null
+++ b/src/components/Charts/mixins/resize.js
@@ -0,0 +1,15 @@
+import { debounce } from '@/utils'
+
+export default {
+  mounted() {
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHanlder)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.__resizeHanlder)
+  }
+}