关于echart数据动态跟新与dataZoom重置一块使用


在做这个项目的时候遇到了echart数据实时更新与dataZoom一起使用,但是

及时更新在通常情况下是没有问题,但是和dataZoom缩放组件一起使用的话。每次的setOption都会将以前的dataZoom进行重置。

比如,现在的dataZoom的初始位置为80-100,手动缩放到40-60,此时使用setOption的话,dataZoom会瞬间回到80-100的位置,即回到重新设置的位置。

这并不是我们想要的效果,经历几次修改,在此记录一下

首先datazoom的设置:

dataZoom: [{
                type: 'slider',
                start: 0,
                end: 50
            }, {
                type: 'inside',
                start: 0,
                end: 50
  }],
然后全局绑定滚轮事件,获得dataZoom最新的位置:
myChart.on('dataZoom',function(event){
        if(event.batch){
                start=event.batch[0].start;
                end=event.batch[0].end;
        }else{
                start=event.start;
                end=event.end;
        };
});
最后把最新的start和end赋值给要更新的option:


window.setInterval(function () {

  option.dataZoom[0].start=start;
  option.dataZoom[0].end=end;
  myChart.setOption(option);
},3000);

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM