echarts中datazoom使用总结 |
您所在的位置:网站首页 › excel缩放比例最大最小值是多少合适的 › echarts中datazoom使用总结 |
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的组件会与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 }],更新中… |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |