Echats的dataZooom动态改变缩放区域

我估计这个是个Bug,或者说设计者没考虑到=-=。

一般来说,设置dataZoom需要设置

{
start:0,
end:50,
startValue:0,
startValue:50
}

其中start和end是指缩放百分比,对于上面就是0%-50%;
而startValue和endValue是缩放绝对值,也就是缩放x为0到50的区域。

有一个小坑,这里的x并不是x的数值,而是从左到右的编号。
比如x是a-z的值,那么a就是0.

不废话了,怎么动态设置?
如果要设置百分比,很简单,直接设置:

let toption=myChart.getOption();
toption.dataZoom[0].start=20;
toption.dataZoom[0].end=70;
myChart.setOption(toption,true);

然鹅,如果要设置startValue这种绝对值形式的,就不一样了=-=。
按照上面的,把start改成startValue会发现什么都没变=-=,这是为什么呢?

因为对于echarts的option,是json数据按顺序设置的,并且start和end在startValue和endValue上面。以下是option里面的顺序:

dataZoom: 
  0:
    show: true
    type: "slider"
    filterMode: "filter"
    xAxisIndex: [0]
    startValue: 20
    endValue: 70
    start: 0
    end: 50

所以,先设置了startValue,之后再start,相当于没设置=-=。
之后,我发现这样可以解决,如果有大佬找到更好的方案求评论

首先在图表初始化的时候就直接设置

{
  start:undefined,
  end:undefined
}

之后动态改变的时候,也设置一次undefined

    toption.dataZoom[0].startValue=20;
    toption.dataZoom[0].endValue=70;
    toption.dataZoom[0].start=undefined;
    toption.dataZoom[0].end=undefined;

After all, it's work!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容