tooltip 在微信或QQ浏览器里滑动时会有卡顿的情况

[xmchyabi]

问题简述 (One-line summary)

折线图表，启用tooltip后，在微信或QQ浏览器上滑动时会有卡顿的情况，比如手指头都移到右边了，但是cross 线还仍在左边，手指松开后，cross线会跳到右边去
数据量不大，在手机自带的浏览器上safari滑动是流畅的，不知道有没有朋友遇到这个问题？
期待能得到大家的帮助，谢谢！

版本及环境 (Version & Environment)

• ECharts 版本 (ECharts version):3.2.3
• 浏览器类型和版本 (Browser version):
• 操作系统类型和版本 (OS Version):iphone5s 9.3.2
  WeChat 6.3.23
  QQ 6.5.3.410

ECharts配置项 (ECharts option)

option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};

其他信息 (Other comments)

代码参考
http://echarts.baidu.com/demo.html#dynamic-data2

[xmchyabi]

我看了源码：

`touchmove: function (event) {
event.preventDefault();
event = normalizeEvent(this.dom, event);

                    processGesture(this, event, 'change');

                    // Mouse move should always be triggered no matter whether
                    // there is gestrue event, because mouse move and pinch may
                    // be used at the same time.
                    domHandlers.mousemove.call(this, event);

                    setTouchTimer(this);
                },`

增加一行 event.preventDefault(); 就好很多了。

[warpig9]

@xmchyabi 加了preventDefault之后，在移动端浏览器里页面不能滚动。有更好的解决办法么？

[jialanmo]

@100pah 改完之后移动端里稍微大点的图表彻底划不动了

[100pah]

@jialanmo
『稍微大点的图表』是指数据多么？
『划不动』是指浏览器卡，还是 tooltip 没有响应？
如果可能的话可以给个 option 我试试么？

[jialanmo]

@100pah
跟 @warpig9 说的一样，不是卡的问题。
因为preventDefault了，如果图表的面积比较大，比如覆盖了整个手机屏幕或大半屏幕，按着图表空白处滑动，整个页面就不能滚动了。

[warpig9]

@jialanmo 我目前的解决办法是：利用touchStart, touchMove事件判断手指在水平、垂直方向上的滑动幅度，如果水平幅度>垂直幅度，则调动preventDefault阻止浏览器处理垂直滚动事件。
另外，浏览器在处理垂直滚动的过程中，需要不断repaint，如果页面比较复杂的话，每一帧需要repaint的元素就很多，会造成丢帧，感觉卡顿。