perf[Charts]: add resize mixin

Author: PanJiaChen

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,

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,

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) {

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)
+  }
+}