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

Closed
xmchyabi opened this Issue Aug 22, 2016 · 6 comments

Comments

Projects
None yet
5 participants
@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

This comment has been minimized.

Show comment
Hide comment
@xmchyabi

xmchyabi Aug 24, 2016

我看了源码:

`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(); 就好很多了。

xmchyabi commented Aug 24, 2016

我看了源码:

`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(); 就好很多了。

@pissang pissang closed this Sep 5, 2016

@warpig9

This comment has been minimized.

Show comment
Hide comment
@warpig9

warpig9 Sep 25, 2016

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

warpig9 commented Sep 25, 2016

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

100pah added a commit that referenced this issue Nov 8, 2016

@jialanmo

This comment has been minimized.

Show comment
Hide comment
@jialanmo

jialanmo Nov 14, 2016

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

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

@100pah

This comment has been minimized.

Show comment
Hide comment
@100pah

100pah Nov 18, 2016

Member

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

Member

100pah commented Nov 18, 2016

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

@jialanmo

This comment has been minimized.

Show comment
Hide comment
@jialanmo

jialanmo Nov 21, 2016

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

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

@warpig9

This comment has been minimized.

Show comment
Hide comment
@warpig9

warpig9 Nov 21, 2016

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

warpig9 commented Nov 21, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment