@cloudbase/weda-ui-mp 3.14.2 → 3.14.4

package/components/chart/bar/index.js

@@ -220,10 +220,6 @@ Component({
   },
   data: {
     ec: {},
-    canvas_id: {
-      type: String,
-      value: `canvas_line_${Date.now()}_${Math.random() * 100}`,
-    },
   },
   lifetimes: {
     attached() {
@@ -269,22 +265,11 @@ Component({
         return options ?? [];
       } else {
         if (this.properties.dataSourceType === 'variable') {
-          const result = transform(
-            'bar',
-            this.properties.datasourceVariable,
-            this.properties
-          );
+          const result = transform('bar', this.properties.datasourceVariable, this.properties);
           return result ?? [];
         } else if (this.properties.dataSourceType === 'custom-connector') {
-          const { connector, connectorMethod, connectorParams } =
-            this.properties;
-          if (
-            !(
-              connector?.datasource?.name &&
-              connectorMethod?.name &&
-              connectorParams
-            )
-          ) {
+          const { connector, connectorMethod, connectorParams } = this.properties;
+          if (!(connector?.datasource?.name && connectorMethod?.name && connectorParams)) {
             console.warn('Chart 参数不完整');
           }
           const res = await callDataSource({
@@ -299,6 +284,7 @@ Component({
     },
     initData() {
       this.setData({
+        id: this.id,
         ec: {
           onInit: this.initChart.bind(this),
         },
@@ -312,7 +298,6 @@ Component({
       });
       canvas.setChart(objEchart);
       const options = await this.getData();
-      console.log('设置前参数bar', options);
       objEchart.setOption(options, true);
       this._chart = objEchart;
       return objEchart;
@@ -324,7 +309,6 @@ Component({
       const canvas = this.selectComponent(`#canvas_${this.properties.id}`);
       canvas?.init();
       const options = await this.getData();
-      console.log('设置前参数bar', options);
       this._chart && this._chart.setOption(options, true);
     },
   },

package/components/chart/bar/index.wxml

@@ -1 +1 @@
-<view wx:if="ec" class="{{className}} ec_container" style="{{style}}" id="{{id}}"> <ec-canvas id="{{'canvas_'+id}}" canvas-id="{{canvas_id}}" ec="{{ ec }}" /> </view>
+<view wx:if="ec" class="{{className}} ec_container" style="{{style}}" id="{{id}}"> <ec-canvas id="{{'canvas_'+id}}" canvasId="{{'canvas_'+id}}" ec="{{ ec }}" /> </view>

package/components/chart/ec-canvas/ec-canvas.js

@@ -48,7 +48,7 @@ Component({
   data: {
     isUseNewCanvas: false,
   },
-
+  domObserver: null,
   ready: function () {
     // Disable prograssive because drawImage doesn't support DOM as parameter
     // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
@@ -67,14 +67,10 @@ Component({
     if (!this.data.ec) {
       console.warn(
         '组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' +
-          'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'
+          'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>',
       );
       return;
     }
-
-    if (!this.data.ec.lazyLoad) {
-      this.init();
-    }
   },
 
   methods: {
@@ -100,13 +96,11 @@ Component({
           console.error(
             '微信基础库版本过低，需大于等于 1.9.91。' +
               '参见：https://github.com/ecomfe/echarts-for-weixin' +
-              '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82'
+              '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82',
           );
           return;
         } else {
-          console.warn(
-            '建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能'
-          );
+          console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
           this.initByOldWay(callback);
         }
       }
@@ -128,16 +122,8 @@ Component({
         .boundingClientRect(async (res) => {
           if (typeof callback === 'function') {
             this.chart = callback(canvas, res.width, res.height, canvasDpr);
-          } else if (
-            this.data.ec &&
-            typeof this.data.ec.onInit === 'function'
-          ) {
-            this.chart = await this.data.ec.onInit(
-              canvas,
-              res.width,
-              res.height,
-              canvasDpr
-            );
+          } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+            this.chart = await this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
           } else {
             this.triggerEvent('init', {
               canvas: canvas,
@@ -154,7 +140,7 @@ Component({
       // version >= 2.9.0：使用新的方式初始化
       const query = wx.createSelectorQuery().in(this);
       query
-        .select('.ec-canvas')
+        .select(`#${this.data.canvasId}`)
         .fields({ node: true, size: true })
         .exec(async (res) => {
           const canvasNode = res[0].node;
@@ -166,28 +152,15 @@ Component({
 
           const ctx = canvasNode.getContext('2d');
 
-          const canvas = new WxCanvas(
-            ctx,
-            this.data.canvasId,
-            true,
-            canvasNode
-          );
+          const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode);
           echarts.setCanvasCreator(() => {
             return canvas;
           });
 
           if (typeof callback === 'function') {
             this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr);
-          } else if (
-            this.data.ec &&
-            typeof this.data.ec.onInit === 'function'
-          ) {
-            this.chart = await this.data.ec.onInit(
-              canvas,
-              canvasWidth,
-              canvasHeight,
-              canvasDpr
-            );
+          } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+            this.chart = await this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr);
           } else {
             this.triggerEvent('init', {
               canvas: canvas,
@@ -196,6 +169,8 @@ Component({
               dpr: canvasDpr,
             });
           }
+
+          this.domObserver && this.domObserver.disconnect();
         });
     },
     canvasToTempFilePath(opt) {
@@ -264,6 +239,29 @@ Component({
         handler.processGesture(wrapTouch(e), 'end');
       }
     },
+
+    // 监听模块曝光
+    observeModuleExpose() {
+      this.domObserver && this.domObserver.disconnect();
+      this.domObserver = wx.createIntersectionObserver(this);
+      this.domObserver.relativeToViewport().observe(`#${this.data.canvasId}`, (res) => {
+        // 当页面出现图表时再绘制图表，避免出现白屏
+        if (res.intersectionRatio) {
+          this.init();
+        }
+      });
+    },
+  },
+  lifetimes: {
+    attached() {
+      // 在组件实例进入页面节点树时执行
+      if (!this.data.ec.lazyLoad) {
+        this.observeModuleExpose();
+      }
+    },
+    detached() {
+      this.domObserver && this.domObserver.disconnect();
+    },
   },
 });
 

package/components/chart/ec-canvas/ec-canvas.wxml

@@ -1,4 +1,4 @@
 <!-- 新的：接口对齐了H5 -->
-<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
+<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" id="{{canvasId}}" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
 <!-- 旧的 -->
 <canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

package/components/chart/line/index.js

@@ -215,10 +215,6 @@ Component({
   },
   data: {
     ec: {},
-    canvas_id: {
-      type: String,
-      value: `canvas_line_${Date.now()}_${Math.random() * 100}`,
-    },
   },
   lifetimes: {
     attached() {
@@ -264,22 +260,11 @@ Component({
         return options ?? [];
       } else {
         if (this.properties.dataSourceType === 'variable') {
-          const result = transform(
-            'line',
-            this.properties.datasourceVariable,
-            this.properties
-          );
+          const result = transform('line', this.properties.datasourceVariable, this.properties);
           return result ?? [];
         } else if (this.properties.dataSourceType === 'custom-connector') {
-          const { connector, connectorMethod, connectorParams } =
-            this.properties;
-          if (
-            !(
-              connector?.datasource?.name &&
-              connectorMethod?.name &&
-              connectorParams
-            )
-          ) {
+          const { connector, connectorMethod, connectorParams } = this.properties;
+          if (!(connector?.datasource?.name && connectorMethod?.name && connectorParams)) {
             console.warn('Chart 参数不完整');
           }
           const res = await callDataSource({
@@ -294,6 +279,7 @@ Component({
     },
     initData() {
       this.setData({
+        id: this.id,
         ec: {
           onInit: this.initChart.bind(this),
         },
@@ -307,7 +293,6 @@ Component({
       });
       canvas.setChart(objEchart);
       const options = await this.getData();
-      console.log('设置前参数line', options);
       objEchart.setOption(options, true);
       this._chart = objEchart;
       return objEchart;
@@ -319,7 +304,6 @@ Component({
       const canvas = this.selectComponent(`#canvas_${this.properties.id}`);
       canvas?.init();
       const options = await this.getData();
-      console.log('设置前参数line', options);
       this._chart && this._chart.setOption(options, true);
     },
   },

package/components/chart/line/index.wxml

@@ -1 +1 @@
-<view wx:if="ec" class="{{className}} ec_container" style="{{style}}" id="{{id}}"> <ec-canvas id="{{'canvas_'+id}}" canvas-id="{{canvas_id}}" ec="{{ ec }}" /> </view>
+<view wx:if="ec" class="{{className}} ec_container" style="{{style}}" id="{{id}}"> <ec-canvas id="{{'canvas_'+id}}" canvasId="{{'canvas_'+id}}" ec="{{ ec }}" /> </view>

package/components/chart/pie/index.js

@@ -145,10 +145,6 @@ Component({
   },
   data: {
     ec: {},
-    canvas_id: {
-      type: String,
-      value: `canvas_pie_${Date.now()}_${Math.random() * 100}`,
-    },
   },
   lifetimes: {
     attached() {
@@ -173,7 +169,6 @@ Component({
       const canvas = this.selectComponent(`#canvas_${this.properties.id}`);
       canvas?.init();
       const options = await this.getData();
-      console.log('设置前参数pie', options);
       this._chart && this._chart.setOption(options, true);
     },
   },
@@ -204,22 +199,11 @@ Component({
         return options ?? [];
       } else {
         if (this.properties.dataSourceType === 'variable') {
-          const result = transform(
-            'pie',
-            this.properties.datasourceVariable,
-            this.properties
-          );
+          const result = transform('pie', this.properties.datasourceVariable, this.properties);
           return result ?? [];
         } else if (this.properties.dataSourceType === 'custom-connector') {
-          const { connector, connectorMethod, connectorParams } =
-            this.properties;
-          if (
-            !(
-              connector?.datasource?.name &&
-              connectorMethod?.name &&
-              connectorParams
-            )
-          ) {
+          const { connector, connectorMethod, connectorParams } = this.properties;
+          if (!(connector?.datasource?.name && connectorMethod?.name && connectorParams)) {
             console.warn('Chart 参数不完整');
           }
           const res = await callDataSource({
@@ -234,6 +218,7 @@ Component({
     },
     initData() {
       this.setData({
+        id: this.id,
         ec: {
           onInit: this.initChart.bind(this),
         },
@@ -248,7 +233,6 @@ Component({
       canvas.setChart(objEchart);
       const options = await this.getData();
       // objEchart.clear();
-      console.log('设置前参数pie', options);
       objEchart.setOption(options, true);
       this._chart = objEchart;
       return objEchart;

package/components/chart/pie/index.wxml

@@ -1 +1 @@
-<view wx:if="ec" class="{{className}} ec_container" style="{{style}}" id="{{id}}"> <ec-canvas id="{{'canvas_'+id}}" canvas-id="{{canvas_id}}" ec="{{ ec }}" /> </view>
+<view wx:if="ec" class="{{className}} ec_container" style="{{style}}" id="{{id}}"> <ec-canvas id="{{'canvas_'+id}}" canvasId="{{'canvas_'+id}}" ec="{{ ec }}" /> </view>

package/package.json

@@ -3,7 +3,7 @@
   "miniprogram": "./",
   "packageManager": "yarn@3.0.2",
   "dependencies": {},
-  "version": "3.14.2",
+  "version": "3.14.4",
   "main": "./",
   "publishConfig": {
     "access": "public"