datazoom
基本结构
与 xAxis和 yAxis是同一级目录下的
Option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value',
},
dataZoom: [{
type: 'inside',
start: 0,
end: 2,
maxSpan: 2,
}, {
start: 0,
end: 10
}]
}
分析简单代码
datazoom其中如果只有一个{},且里面设置了inside的话是看不见datazoom这个组件的具体样式的,就是可以滑动,但是显示不出来,如下
// 可以缩放,但是组件的样式不显示,如下图
dataZoom: [{
type: 'inside'
}],
但是如果设置了两个{},{},这样一个通过内嵌的进去的样式,另一个用来显示当前datazoom。代码如下
// 如下图,是有具体的样式的
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
调整与x轴的上下位置
有时datazoom的组件会与x轴重叠,我们怎么调节两者之间的距离呢?----通过增加grid组件可以调节
主要是通过其中的bottom属性来调节
Option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value',
},
grid: {
left: '1%',
right: '10%',
bottom: '11%',
containLabel: true
},
dataZoom: [{
type: 'inside',
start: 0,
end: 2,
maxSpan: 2,
}, {
start: 0,
end: 10
}]
}
限制拖动的最大值
有时候我们拖动轴框住的范围很大时,由于数据量过大,会出现卡顿的情况,我们可以限制拖动框的大小来解决—通过minSpan和maxSpan属性来调节。
minSpan后面跟整数,表示最小为当前图形的百分之多少,比如1,就是最小就是1%。同样maxSpan是同样的意思。
dataZoom: [{
type: 'inside',
start: 0,
end: 2,
// 最大的放大是图形的2%
maxSpan: 2,
}, {
start: 0,
end: 10
}],
更新中…