Merge pull request #390 from ElemeFE/0622-add-resize-watcher

feat(core): 增加 resize 时的容器检测

docs/en/props.md

@@ -28,6 +28,7 @@ All charts have properties such as `width`, `events` and so on.
 | judge-width | whether to deal with chart width | boolean | false |
 | width-change-delay | container width change delay | number | 300 |
 | resizeable | whether to deal with window resize | boolean | true |
+| cancel-resize-check | whether to cancel container check while resizing | boolean | false |
 | resize-delay | time delay of window resize handler | number | 200 |
 | change-delay | delay of chart redraw callback while props change | number | 0 |
 | set-option-opts | the second parameter of echarts setOption, [doc](http://echarts.baidu.com/api.html#echartsInstance.setOption) | boolean<br>object | true |

docs/props.md

@@ -29,6 +29,7 @@
 | judge-width | 是否处理生成图表时的宽度问题 | boolean | false |
 | width-change-delay | 容器宽度变化的延迟 | number | 300 |
 | resizeable | 是否处理窗口 resize 事件 | boolean | true |
+| cancel-resize-check | 是否禁用 resize 时的容器检测 | boolean | false |
 | resize-delay | 窗口 resize 事件回调的延迟 | number | 200 |
 | change-delay | 属性修改触发图表重绘回调的延迟 | number | 0 |
 | set-option-opts | echarts setOption 的第二个参数, [参考文档](http://echarts.baidu.com/api.html#echartsInstance.setOption) | boolean<br>object | true |

examples/test/resize.vue

@@ -7,6 +7,11 @@
   -->
   <div>
     <ve-line :data="chartData"></ve-line>
+    <ve-line :data="chartData" :cancel-resize-check="false"></ve-line>
+    <button @click="resizeable = !resizeable">
+      change resizeable: {{ resizeable }}
+    </button>
+    <ve-line :data="chartData" :resizeable="resizeable"></ve-line>
     <button @click="change">change width height</button>
     <ve-line :data="chartData" :width="chartWidth" :height="chartHeight"></ve-line>
     <ve-line :data="chartData" :resizeable="false"></ve-line>
@@ -22,7 +27,8 @@ export default {
     return {
       chartData: LINE_DATA,
       chartWidth: '400px',
-      chartHeight: '400px'
+      chartHeight: '400px',
+      resizeable: true
     }
   },
   methods: {

src/core.js

@@ -91,7 +91,8 @@ export default {
     resizeable: { type: Boolean, default: true },
     resizeDelay: { type: Number, default: 200 },
     changeDelay: { type: Number, default: 0 },
-    setOptionOpts: { type: [Boolean, Object], default: true }
+    setOptionOpts: { type: [Boolean, Object], default: true },
+    cancelResizeCheck: Boolean
   },
 
   watch: {
@@ -121,7 +122,9 @@ export default {
       handler: 'themeChange'
     },
 
-    themeName: 'themeChange'
+    themeName: 'themeChange',
+
+    resizeable: 'resizeableHandler'
   },
 
   computed: {
@@ -163,9 +166,21 @@ export default {
       }
     },
 
-    nextTickResize () { this.$nextTick(this.echarts.resize) },
+    nextTickResize () { this.$nextTick(this.resize) },
+
+    resize () {
+      if (!this.cancelResizeCheck) {
+        if (this.$el &&
+          this.$el.clientWidth &&
+          this.$el.clientHeight) {
+          this.echartsResize()
+        }
+      } else {
+        this.echartsResize()
+      }
+    },
 
-    resize () { this.echarts.resize() },
+    echartsResize () { this.echarts && this.echarts.resize() },
 
     optionsHandler (options) {
       // legend
@@ -222,17 +237,17 @@ export default {
     },
 
     judgeWidthHandler (options) {
-      const { echarts, widthChangeDelay } = this
-      if (this.$el.clientWidth) {
-        echarts && echarts.resize()
+      const { widthChangeDelay, resize } = this
+      if (this.$el.clientWidth || this.$el.clientHeight) {
+        resize()
       } else {
         this.$nextTick(_ => {
-          if (this.$el.clientWidth) {
-            echarts && echarts.resize()
+          if (this.$el.clientWidth || this.$el.clientHeight) {
+            resize()
           } else {
             setTimeout(_ => {
-              echarts && echarts.resize()
-              if (!this.$el.clientWidth) {
+              resize()
+              if (!this.$el.clientWidth || !this.$el.clientHeight) {
                 console.warn(' Can\'t get dom width or height ')
               }
             }, widthChangeDelay)
@@ -241,13 +256,28 @@ export default {
       }
     },
 
+    resizeableHandler (resizeable) {
+      if (resizeable && !this._once.onresize) this.addResizeListener()
+      if (!resizeable && this._once.onresize) this.removeResizeListener()
+    },
+
     init () {
       if (this.echarts) return
       const themeName = this.themeName || this.theme || DEFAULT_THEME
       this.echarts = echartsLib.init(this.$refs.canvas, themeName, this.initOptions)
       if (this.data) this.changeHandler()
       this.createEventProxy()
-      if (this.resizeable) window.addEventListener('resize', this.resizeHandler)
+      if (this.resizeable) this.addResizeListener()
+    },
+
+    addResizeListener () {
+      window.addEventListener('resize', this.resizeHandler)
+      this._once.onresize = true
+    },
+
+    removeResizeListener () {
+      window.removeEventListener('resize', this.resizeHandler)
+      this._once.onresize = false
     },
 
     addWatchToProps () {
@@ -292,7 +322,7 @@ export default {
     },
 
     clean () {
-      if (this.resizeable) window.removeEventListener('resize', this.resizeHandler)
+      if (this.resizeable) this.removeResizeListener()
       this.echarts.dispose()
     }
   },
@@ -301,12 +331,8 @@ export default {
     this.echarts = null
     this.registeredEvents = []
     this._once = {}
-    this.resizeHandler = debounce(_ => {
-      this.echarts && this.echarts.resize()
-    }, this.resizeDelay)
-    this.changeHandler = debounce(_ => {
-      this.dataHandler && this.dataHandler()
-    }, this.changeDelay)
+    this.resizeHandler = debounce(this.resize, this.resizeDelay)
+    this.changeHandler = debounce(this.dataHandler, this.changeDelay)
     this.addWatchToProps()
   },