From c398ee0ddc88579beabebe1324573c08115488b3 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 13 Mar 2018 18:36:11 +0800
Subject: [PATCH] perf[Charts]: add resize mixin
---
src/components/Charts/keyboard.vue | 2 ++
src/components/Charts/lineMarker.vue | 2 ++
src/components/Charts/mixChart.vue | 3 ++-
src/components/Charts/mixins/resize.js | 15 +++++++++++++++
4 files changed, 21 insertions(+), 1 deletion(-)
create mode 100644 src/components/Charts/mixins/resize.js
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)
+ }
+}
--
GitLab