echarts坐标轴指示器(axisPointer)移动延迟问题

近期遇到了一个echarts坐标轴指示器(axisPointer)移动延迟问题,把我最后的解决方案分享给大家

问题现象
1、echarts官网上demo上调好后,鼠标移动,指示器跟着移动速度很快非常流畅
2、到项目(ANG2项目)里面后,指示器在鼠标移动时大概有一秒的延迟后才跟随移动,代码一模一样,差别在于在项目中。

解决思路

此前,因为echarts动画requestAnimationFrame在echarts对象销毁后并未清除动画,遗留动画一直存在,导致angular2的zone.js一直检测变化,引起性能问题。因此使用了ngZone.runOutsideAngular的方法不检测echarts的变更。

有了这个历史原因,那么也排除了变更检测的问题。

怀疑1,项目页面上有大量消耗性能的代码在长期执行,鼠标移动时该部分代码占据了时间导致延迟。
怀疑2,echarts的配置项不合理

分析事件执行
1、本地写了个echarts图的html文件,用谷歌自带的性能分析工具记录10s的情况,期间一直移动鼠标指示器跟着移动非常快
分析图形中的mousemove事件,响应非常快,大多数是1ms、2ms
(公司限制图片上传)
2、同样操作记录10s项目中的echarts图,mousemove事件耗时10~20ms,相差10倍。对比Event Log中的事件,发现TooltipContent.js代码执行16ms,占了很大一部分时间。
(公司限制图片上传)

TooltipContent.js是什么呢?是echarts的中的代码。
更改源码是不靠谱滴,因此我们分析执行这坨代码的老被调戏的原因。
发现option的tooltip中配置了 trigger: 'axis',trigger是触发器,设置了该值鼠标移动必定会触发Tooltip模块的某些方法,暂时去掉trigger,卡顿消失。

结论:使用tooltip设置trigger:'axis'触发器显示坐标轴指示器,会增加页面性能消耗,用axisPointer设置解决该问题
从该角度入手,对代码做如下处理,问题解决:

option = {
    axisPointer: { // 会出现横竖2个方向的指示器
        show: true,
        type: 'line',
        label:{
            show: false, //不显示指示器的文本标签
        },
    },
    yAxis: [ //不显示竖向的指示器
        {
            axisPointer: {
                show: false,
            },
        }
    ],
};

你可能感兴趣的:(echarts3,angular2)