dataZoom时控制axisLabel的interval或formatter

吴昌龙 发布于 2014/06/24 11:27
阅读 3K+
收藏 0

有个疑问,我们能否在外部axisLabel对interval进行控制或者控制formatter,使得data zoom拖动的时候可以地改变xAxis值。


举例来说:当data Zoom在3个小时的范围内,axisLabel以每半个小时的间隔进行呈现,当data Zoom在24小时的范围内时,axisLabel以每三个小时的间隔进行呈现。


示例数据:
["01:50","02:00","02:10","02:20","02:30", "02:40", "02:50", "03:00", "03:10", "03:20", "03:30", "03:40", "03:50", "04:00", "04:10", "04:20", "04:20", "04:30", "04:40", "04:50", "05:00", "05:10", "05:20", "05:30", "05:40", "05:50", "06:00", "06:10", "06:20","06:30","06:40","06:50","07:00", "07:10", "07:20", "07:30", "07:40", "07:50", "08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00", "09:10", "09:20", "09:30", "09:40", "09:50", "10:00", "10:10", "10:20", "10:30", "10:40"]


3个小时范围内axisLabel的显示效果:




24小时范围内axisLabel的显示效果:

加载中
0
Kener-林峰
Kener-林峰

完全可以,你都甚至永远只有一份当前数据传给echarts都行。dataZoom只会已第一个series的数据为缩放对象。你可以用第一个系列数据作为全局,响应dataZoom事件,通过当前区间判断应该要什么粒度的数据再请求,然后作为第二组数据给echarts渲染,我们就有项目这样实现无限数据缩放的。

吴昌龙
能否给一个具体的例子,非常感谢!
0
fairyzter
fairyzter

提供一个大概思路供参考,你的最小粒度是半小时,就把所有数据以半小时粒度全部返回

//异步请求回来后设置图表初始 interval值

var intervalNum='auto'; 

if(type=3){

intervalNum = 0;

}else if(type=24){

intervalNum= 5;

}

myChart.setOption({
    xAxis: {
        axisLabel:{
            interval:intervalNum,
        }
    }
});

//监听dataZoom事件,设置interval值

myChart.on('dataZoom', function (params) {
    myChart.setOption({
        xAxis: {
            axisLabel:{
                interval:'auto',
            }
        },
    })
});

返回顶部
顶部