feat: providing disableTouch to ignore touch events

fix #37

app.json

@@ -21,7 +21,8 @@
     "pages/sankey/index",
     "pages/themeRiver/index",
     "pages/lazyLoad/index",
-    "pages/multiCharts/index"
+    "pages/multiCharts/index",
+    "pages/move/index"
   ],
   "window":{
     "backgroundTextStyle":"light",

ec-canvas/ec-canvas.js

@@ -61,7 +61,7 @@ Component({
     },
 
     touchStart(e) {
-      if (this.chart && e.touches.length > 0) {
+      if (!this.data.ec.disableTouch && this.chart && e.touches.length > 0) {
         var touch = e.touches[0];
         this.chart._zr.handler.dispatch('mousedown', {
           zrX: touch.x,
@@ -75,7 +75,7 @@ Component({
     },
 
     touchMove(e) {
-      if (this.chart && e.touches.length > 0) {
+      if (!this.data.ec.disableTouch && this.chart && e.touches.length > 0) {
         var touch = e.touches[0];
         this.chart._zr.handler.dispatch('mousemove', {
           zrX: touch.x,
@@ -85,7 +85,7 @@ Component({
     },
 
     touchEnd(e) {
-      if (this.chart) {
+      if (!this.data.ec.disableTouch && this.chart) {
         const touch = e.changedTouches ? e.changedTouches[0] : {};
         this.chart._zr.handler.dispatch('mouseup', {
           zrX: touch.x,

pages/index/index.js

@@ -71,6 +71,9 @@ Page({
     }, {
       id: 'multiCharts',
       name: '一个页面中多个图表'
+    }, {
+      id: 'move',
+      name: '页面不阻塞滚动'
     }]
   },
 

pages/move/index.js

@@ -0,0 +1,122 @@
+import * as echarts from '../../ec-canvas/echarts';
+
+Page({
+  onShareAppMessage: function (res) {
+    return {
+      title: 'ECharts 可以在微信小程序中使用啦！',
+      path: '/pages/index/index',
+      success: function () { },
+      fail: function () { }
+    }
+  },
+  data: {
+    ecBar: {
+      // 如果想要禁止触屏事件，以保证在图表区域内触摸移动仍能滚动页面，
+      // 就将 disableTouch 设为 true
+      // disableTouch: true,
+
+      onInit: function (canvas, width, height) {
+        const barChart = echarts.init(canvas, null, {
+          width: width,
+          height: height
+        });
+        canvas.setChart(barChart);
+
+        // 将 barChart 绑定到 this，以供其他函数访问
+        this.barChart = barChart;
+        barChart.setOption(getBarOption());
+
+        return barChart;
+      }
+    }
+  },
+
+  onReady() {
+  }
+});
+
+function getBarOption() {
+  return {
+    color: ['#37a2da', '#32c5e9', '#67e0e3'],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+      }
+    },
+    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]
+      },
+      {
+        name: '正面',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true
+          }
+        },
+        data: [120, 102, 141, 174, 190, 250, 220]
+      },
+      {
+        name: '负面',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true,
+            position: 'left'
+          }
+        },
+        data: [-20, -32, -21, -34, -90, -130, -110]
+      }
+    ]
+  };
+}

pages/move/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
+}

pages/move/index.wxml

@@ -0,0 +1,32 @@
+<!--index.wxml-->
+<view class="move-container">
+  <ec-canvas id="mychart-dom-move-bar" canvas-id="mychart-move-bar" ec="{{ ecBar }}"></ec-canvas>
+  <view class="text">
+    <text>这是一个展示页面不被图表阻塞的例子</text>
+    <text>在图表区域（红色边框）之外可以滚动</text>
+  </view>
+  <view class="text">
+    <text>这是一个展示页面不被图表阻塞的例子</text>
+    <text>在图表区域（红色边框）之外可以滚动</text>
+  </view>
+  <view class="text">
+    <text>这是一个展示页面不被图表阻塞的例子</text>
+    <text>在图表区域（红色边框）之外可以滚动</text>
+  </view>
+  <view class="text">
+    <text>这是一个展示页面不被图表阻塞的例子</text>
+    <text>在图表区域（红色边框）之外可以滚动</text>
+  </view>
+  <view class="text">
+    <text>这是一个展示页面不被图表阻塞的例子</text>
+    <text>在图表区域（红色边框）之外可以滚动</text>
+  </view>
+  <view class="text">
+    <text>这是一个展示页面不被图表阻塞的例子</text>
+    <text>在图表区域（红色边框）之外可以滚动</text>
+  </view>
+  <view class="text">
+    <text>这是一个展示页面不被图表阻塞的例子</text>
+    <text>在图表区域（红色边框）之外可以滚动</text>
+  </view>
+</view>

pages/move/index.wxss

@@ -0,0 +1,21 @@
+.move-container {
+  width: 100%;
+  min-height: 500px;
+}
+
+#mychart-dom-move-bar {
+  width: 70%;
+  height: 300px;
+  margin: 20px 15%;
+  border: 1px solid red;
+  display: block;
+}
+
+.move-container .text {
+  margin-bottom: 20px;
+}
+
+.move-container text {
+  margin: 10px;
+  display: block;
+}