Merge pull request #12 from ambit-tsai/dev

fix: call `setOption` after rendering

Author: ambit-tsai

docs/main.js

@@ -69,10 +69,11 @@ export function createComponent({
 
         watch: {
             loading(val) {
+                const ctx = this;
                 if (val) {
-                    this.inst.showLoading(this.loadingType, this.loadingOpts);
+                    ctx.inst.showLoading(ctx.loadingType, ctx.loadingOpts);
                 } else {
-                    this.inst.hideLoading();
+                    ctx.inst.hideLoading();
                 }
             },
 
@@ -118,13 +119,17 @@ export function createComponent({
 }
 
 
+
+const style = {
+    height: '100%',
+    overflow: 'hidden',
+};
+
+
 function vue2Render(h) {
     return h('div', {
         attrs: this.$attrs,
-        style: {
-            height: '100%',
-            overflow: 'hidden',
-        },
+        style,
     });
 }
 
@@ -133,10 +138,7 @@ function getVue3Render(h) {
     return function () {
         return h('div', {
             ...this.$attrs,
-            style: {
-                height: '100%',
-                overflow: 'hidden',
-            },
+            style,
         });
     };
 }

src/ECharts.js

@@ -2,20 +2,23 @@
 export function getHooks(echarts) {
     return {
         mounted() {
-            const inst = echarts.init(this.$el, this.initTheme, this.initOpts);
-            this.$data._private.dynamic.inst = inst;
-            
-            if (this.loading) {
-                inst.showLoading(this.loadingType, this.loadingOpts)
+            const ctx = this;
+            const inst = echarts.init(ctx.$el, ctx.initTheme, ctx.initOpts);
+            ctx.$data._private.dynamic.inst = inst;
+            if (ctx.loading) {
+                inst.showLoading(ctx.loadingType, ctx.loadingOpts)
             }
-            if (this.option) {
-                this.setOption(this.option, this.setOptionOpts);
+            if (ctx.events) {
+                ctx.events.forEach(args => inst.on.apply(inst, args));
             }
-            if (this.events) {
-                this.events.forEach(args => inst.on(...args));
+            if (ctx.autoResize) {
+                ctx.addResizeListener();
             }
-            if (this.autoResize) {
-                this.addResizeListener();
+            if (ctx.option) {
+                // Wait for rendering
+                setTimeout(() => {
+                    ctx.setOption(ctx.option, ctx.setOptionOpts);
+                });
             }
         },
 

src/LifecycleHooks.js

@@ -1,12 +1,11 @@
 
-export default typeof ResizeObserver === 'function'
-    ? ResizeObserver
-    : class ResizeObserverSham {
-        constructor() {
-            console.warn('[ECharts-For-Vue] "autoResize" is invalid, you need a ResizeObserver polyfill');
-        }
+function ResizeObserverSham() {
+    console.warn('[ECharts-For-Vue] "autoResize" is invalid, you need a ResizeObserver polyfill');
+}
 
-        disconnect() {}
+const noop = () => {};
+ResizeObserverSham.prototype.disconnect = noop;
+ResizeObserverSham.prototype.observe = noop;
 
-        observe() {}
-    }
+
+export default typeof ResizeObserver === 'function' ? ResizeObserver : ResizeObserverSham;

src/ResizeObserverSham.js

@@ -4,9 +4,9 @@
             class="chart"
             ref="chart"
             :option="option"
-            :setOptionOpts="{ notMerge: false }"
+            :setOptionOpts="{ notMerge: true }"
             :loading="loading"
-            :loadingOpts="{ text: 'Wait for 0.8s' }"
+            :loadingOpts="{ text: 'Wait for 0.5s' }"
             :events="[
                 ['dblclick', onDblclick],
             ]"
@@ -37,15 +37,8 @@ export default {
             this.loading = true;
             setTimeout(() => {
                 this.option = this.option === Option1 ? Option2 : Option1;
-                this.option = {
-                    series: [{
-                        data: Option2.series[0].data.sort(() => Math.random() - .5),
-                    }, {
-                        data: Option2.series[1].data.sort(() => Math.random() - .5),
-                    }],
-                };
                 this.loading = false;
-            }, 100);
+            }, 500);
         },
         onDblclick() {
             alert('The listener is triggered');

test/vue2-echarts3/src/App.vue

@@ -72,10 +72,8 @@ export const Option1 = Object.freeze({
             type: 'line',
             stack: '总量',
             label: {
-                normal: {
-                    show: true,
-                    position: 'top'
-                }
+                show: true,
+                position: 'top',
             },
             areaStyle: {},
             data: [820, 932, 901, 934, 1290, 1330, 1320]