echarts中datazoom使用总结-拖拉条位置调整以及缩放最大值设置_sing__star_datazoom

网络投稿 02-07 4966

datazoom 基本结构分析简单代码调整与x轴的上下位置限制拖动的最大值

基本结构

与 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 }],

更新中…