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

最新推荐文章于 2025-06-13 10:59:51 发布

sing__star

最新推荐文章于 2025-06-13 10:59:51 发布

阅读量2.7w

点赞数 11

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_44774831/article/details/116430740

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Echarts中的dataZoom组件，包括基本结构、样式展示、与x轴位置调整以及限制拖动最大值的方法。通过设置dataZoom的startValue、type、maxSpan等属性，可以实现数据区域的可视化缩放，并避免与x轴重叠。同时，通过grid组件的bottom属性调整dataZoom与x轴的距离，以优化图表布局。此外，minSpan和maxSpan属性用于限制缩放范围，防止因数据量大导致的卡顿问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本结构

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

在这里插入图片描述

更新中…