Incubator-echarts: dataZoom在移动端缩放问题

[lwwlww]

问题简述 (One-line summary)

dataZoom在移动端使用时，当图表的容器不在页面最顶端，上面有其他容器或内容时，双指缩放就会有问题。
具体表现是缩放有效范围（高度）是从页面顶部开始的，而不是容器顶部。从而导致无法在图表上用手指缩放。

版本及环境 (Version & Environment)

• ECharts 版本 (ECharts version): 3.1.9
• 浏览器类型和版本 (Browser version):safari
• 操作系统类型和版本 (OS Version):IOS 9.3.1
  

  重现步骤 (Steps to reproduce)

1.
2.

期望结果 (Expected behaviour)

可能哪里有问题 (What went wrong)

ECharts配置项 (ECharts option)

option = {
  tooltip : {
            trigger: 'item'
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
            data:['Budget 2011', 'Budget 2012'],
            itemGap: 5
        },
        grid: {
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type : 'category',
                data : [1,2,3,4,5,6,7,8,9,10,11]
            }
        ],
        yAxis: [
            {
                type : 'value',
                name : 'Budget (million USD)',
                axisLabel: {
                    formatter: function (a) {
                        return
                    }
                }
            }
        ],
        dataZoom: [
            {
                show: true,
                start:0,
                end: 100,
                handleSize: 8
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            },
        ],
        series : [
            {
                name: 'Budget 2011',
                type: 'bar',
                data: [34,65,11,44,55,32,76,91,3,21,98]
            },
            {
                name: 'Budget 2012',
                type: 'bar',
                data: [24,35,51,94,35,9,23,56,11,45,64]
            }
        ]
}

其他信息 (Other comments)

http://www.propowerlink.com:1166/data/index.html

[lwwlww]

反复测试，这个的确是BUG，所有移动端都有。等不及echarts版本更新，自己找到原因并解决了。

原因：PC端缩放时，dataZoom是根据dom的offsetX,offsetY计算鼠标是否落在数据区。offsetX,offsetY都是相对父亲dom的，计算方法没问题，所以PC端缩放正常。

而移动端缩放时，dataZoom是根据触摸屏的pinchX,pinchY的值来计算手指是否落在数据区。pinchX,pinchY值是相对页面的，不是相对父dom。所以计算结果有问题。正确的做法是参与计算的pinchX,pinchY要减去echart dom的相对页面的top和left。

解决：
我自己修改了echarts.js，添加了dom相对页面top和left差值的两个变量，并在函数function pinch(e) {....}里让pinchX,pinchY要减去这两个变量。 移动端缩放就正常了。