兼容小程序skyline渲染模式

app.json

@@ -24,7 +24,8 @@
     "pages/multiCharts/index",
     "pages/move/index",
     "pages/saveCanvas/index",
-    "pages/loadImage/index"
+    "pages/loadImage/index",
+    "pages/skyline/index"
   ],
   "window": {
     "backgroundTextStyle": "light",
@@ -33,5 +34,11 @@
     "navigationBarTitleText": "ECharts 图表示例",
     "navigationBarTextStyle": "black"
   },
-  "sitemapLocation": "sitemap.json"
+  "sitemapLocation": "sitemap.json",
+  "lazyCodeLoading": "requiredComponents",
+  "rendererOptions": {
+    "skyline": {
+      "defaultContentBox": true
+    }
+  }
 }

ec-canvas/ec-canvas.js

@@ -2,6 +2,8 @@ import WxCanvas from './wx-canvas';
 import * as echarts from './echarts';
 
 let ctx;
+// canvas 的位置信息 { top, left }
+let canvasRect = { left: 0, top: 0 }
 
 function compareVersion(v1, v2) {
   v1 = v1.split('.')
@@ -142,7 +144,7 @@ Component({
 
     initByNewWay(callback) {
       // version >= 2.9.0：使用新的方式初始化
-      const query = wx.createSelectorQuery().in(this)
+      const query = this.createSelectorQuery()
       query
         .select('.ec-canvas')
         .fields({ node: true, size: true })
@@ -213,20 +215,42 @@ Component({
       }
     },
 
-    touchStart(e) {
+    // 计算获取 canvas 的位置信息
+    calculateCanvasRect() {
+      const version = wx.getSystemInfoSync().SDKVersion;
+      // 3.4.1 后skyline canvas点击直接返回了x,y坐标，不需要计算
+      // @see https://developers.weixin.qq.com/community/develop/doc/00068692e542f801935138cdb6b800?jumpto=comment&commentid=0002c0c26446e0519b51053ef6b0
+      const needCalculate = compareVersion(version, '3.4.1') < 0 && this.renderer === 'skyline';
+      if(!needCalculate) {
+        return
+      }
+
+      return new Promise(resolve => {
+        const query = this.createSelectorQuery()
+        query.select('.ec-canvas').boundingClientRect(({ left, top }) => {
+          canvasRect = { left, top }
+
+          resolve()
+        }).exec()
+      })
+    },
+
+    async touchStart(e) {
+      await this.calculateCanvasRect()
+
       if (this.chart && e.touches.length > 0) {
         var touch = e.touches[0];
         var handler = this.chart.getZr().handler;
         handler.dispatch('mousedown', {
-          zrX: touch.x,
-          zrY: touch.y,
+          zrX: touch.x || touch.pageX - canvasRect.left,
+          zrY: touch.y || touch.pageY - canvasRect.top,
           preventDefault: () => {},
           stopImmediatePropagation: () => {},
           stopPropagation: () => {}
         });
         handler.dispatch('mousemove', {
-          zrX: touch.x,
-          zrY: touch.y,
+          zrX: touch.x || touch.pageX - canvasRect.left,
+          zrY: touch.y || touch.pageY - canvasRect.top,
           preventDefault: () => {},
           stopImmediatePropagation: () => {},
           stopPropagation: () => {}
@@ -240,8 +264,8 @@ Component({
         var touch = e.touches[0];
         var handler = this.chart.getZr().handler;
         handler.dispatch('mousemove', {
-          zrX: touch.x,
-          zrY: touch.y,
+          zrX: touch.x || touch.pageX - canvasRect.left,
+          zrY: touch.y || touch.pageY - canvasRect.top,
           preventDefault: () => {},
           stopImmediatePropagation: () => {},
           stopPropagation: () => {}
@@ -255,15 +279,15 @@ Component({
         const touch = e.changedTouches ? e.changedTouches[0] : {};
         var handler = this.chart.getZr().handler;
         handler.dispatch('mouseup', {
-          zrX: touch.x,
-          zrY: touch.y,
+          zrX: touch.x || touch.pageX - canvasRect.left,
+          zrY: touch.y || touch.pageY - canvasRect.top,
           preventDefault: () => {},
           stopImmediatePropagation: () => {},
           stopPropagation: () => {}
         });
         handler.dispatch('click', {
-          zrX: touch.x,
-          zrY: touch.y,
+          zrX: touch.x || touch.pageX - canvasRect.left,
+          zrY: touch.y || touch.pageY - canvasRect.top,
           preventDefault: () => {},
           stopImmediatePropagation: () => {},
           stopPropagation: () => {}
@@ -277,8 +301,8 @@ Component({
 function wrapTouch(event) {
   for (let i = 0; i < event.touches.length; ++i) {
     const touch = event.touches[i];
-    touch.offsetX = touch.x;
-    touch.offsetY = touch.y;
+    touch.offsetX = touch.x || touch.pageX - canvasRect.left;
+    touch.offsetY = touch.y || touch.pageY - canvasRect.top;
   }
   return event;
 }

pages/index/index.js

@@ -80,6 +80,9 @@ Page({
     }, {
       id: 'loadImage',
       name: '加载图片'
+    },{
+      id: 'skyline',
+      name: 'skyline渲染'
     }]
   },
 

pages/skyline/index.js

@@ -0,0 +1,133 @@
+import * as echarts from '../../ec-canvas/echarts';
+
+const app = getApp();
+
+function initChart(canvas, width, height, dpr) {
+  const chart = echarts.init(canvas, null, {
+    width: width,
+    height: height,
+    devicePixelRatio: dpr // new
+  });
+  canvas.setChart(chart);
+
+  var option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+      },
+      confine: true
+    },
+    legend: {
+      data: ['热度', '正面', '负面']
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: 15,
+      top: 40,
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          lineStyle: {
+            color: '#999'
+          }
+        },
+        axisLabel: {
+          color: '#666'
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        axisTick: { show: false },
+        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
+        axisLine: {
+          lineStyle: {
+            color: '#999'
+          }
+        },
+        axisLabel: {
+          color: '#666'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '热度',
+        type: 'bar',
+        label: {
+          normal: {
+            show: true,
+            position: 'inside'
+          }
+        },
+        data: [300, 270, 340, 344, 300, 320, 310],
+        itemStyle: {
+          // emphasis: {
+          //   color: '#37a2da'
+          // }
+        }
+      },
+      {
+        name: '正面',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true
+          }
+        },
+        data: [120, 102, 141, 174, 190, 250, 220],
+        itemStyle: {
+          // emphasis: {
+          //   color: '#32c5e9'
+          // }
+        }
+      },
+      {
+        name: '负面',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true,
+            position: 'left'
+          }
+        },
+        data: [-20, -32, -21, -34, -90, -130, -110],
+        itemStyle: {
+          // emphasis: {
+          //   color: '#67e0e3'
+          // }
+        }
+      }
+    ]
+  };
+
+  chart.setOption(option);
+  return chart;
+}
+
+Page({
+  onShareAppMessage: function (res) {
+    return {
+      title: 'ECharts 可以在微信小程序中使用啦！',
+      path: '/pages/index/index',
+      success: function () { },
+      fail: function () { }
+    }
+  },
+  data: {
+    ec: {
+      onInit: initChart
+    }
+  },
+
+  onReady() {
+  }
+});

pages/skyline/index.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  },
+  "renderer": "skyline",
+  "componentFramework": "glass-easel"
+}

pages/skyline/index.wxml

@@ -0,0 +1,6 @@
+<scroll-view type="custom" scroll-y="true" class="warp">
+  <view class="gap">
+    <text>占位内容，往上滑动↑</text>
+  </view>
+  <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
+</scroll-view>

pages/skyline/index.wxss

@@ -0,0 +1,17 @@
+/**index.wxss**/
+ec-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.warp {
+  height: 100vh;
+}
+
+.gap {
+  height: 600px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #817d7d;
+}