@cloudbase/weda-ui-mp 3.21.0 → 3.21.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -23,6 +23,7 @@ Component({
|
|
|
23
23
|
|
|
24
24
|
data: {
|
|
25
25
|
isUseNewCanvas: false,
|
|
26
|
+
isVisible: false,
|
|
26
27
|
},
|
|
27
28
|
domObserver: null,
|
|
28
29
|
ready: function () {
|
|
@@ -98,7 +99,7 @@ Component({
|
|
|
98
99
|
.boundingClientRect(async (res) => {
|
|
99
100
|
if (typeof callback === 'function') {
|
|
100
101
|
this.chart = callback(canvas, res.width, res.height, canvasDpr);
|
|
101
|
-
} else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
|
|
102
|
+
} else if (this.data.isVisible && this.data.ec && typeof this.data.ec.onInit === 'function') {
|
|
102
103
|
this.chart = await this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
|
|
103
104
|
} else {
|
|
104
105
|
this.triggerEvent('init', {
|
|
@@ -136,7 +137,8 @@ Component({
|
|
|
136
137
|
|
|
137
138
|
if (typeof callback === 'function') {
|
|
138
139
|
this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr);
|
|
139
|
-
} else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
|
|
140
|
+
} else if (this.data.isVisible && this.data.ec && typeof this.data.ec.onInit === 'function') {
|
|
141
|
+
// 节点可见的时候重绘
|
|
140
142
|
this.chart = await this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr);
|
|
141
143
|
} else {
|
|
142
144
|
this.triggerEvent('init', {
|
|
@@ -225,7 +227,10 @@ Component({
|
|
|
225
227
|
this.domObserver.relativeToViewport().observe(`#${this.data.canvasId}`, (res) => {
|
|
226
228
|
// 当页面出现图表时再绘制图表，避免出现白屏
|
|
227
229
|
if (res.intersectionRatio) {
|
|
230
|
+
this.setData({ isVisible: true });
|
|
228
231
|
this.init();
|
|
232
|
+
} else {
|
|
233
|
+
this.setData({ isVisible: false });
|
|
229
234
|
}
|
|
230
235
|
});
|
|
231
236
|
},
|
|
@@ -239,6 +244,7 @@ Component({
|
|
|
239
244
|
},
|
|
240
245
|
detached() {
|
|
241
246
|
this.domObserver && this.domObserver.disconnect();
|
|
247
|
+
this.setData({ isVisible: false });
|
|
242
248
|
},
|
|
243
249
|
},
|
|
244
250
|
});
|