我估计这个是个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!