🍓 作者主页：💖仙女不下凡💖

🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！

🍓Echart官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！

✨参照官网，dataZoom 中有两个对象如下，这样写是因为type分为 鼠标滚动 与 滑动条 两种缩放方式，当type类型不同时，里面配置的属性略有不同，请根据实际需求使用
dataZoom图解

dataZoom: [
  { type: 'inside' }, // 用哪种方式就写哪个对象
  { type: 'slider' }
]

✨其他属性请参考一下内容

/有值的都可视为默认值/
dataZoom: [
  {
    type: 'inside', // 类型, inside表示鼠标滚动进行缩放
    id: '', 
    disabled: false, // 是否停止组件的功能
    xAxisIndex: '', // 组件控制的 x轴, 默认全部
    yAxisIndex: '', // 组件控制的 y轴
    radiusAxisIndex: '', // 组件控制的 radius轴
    angleAxisIndex: '', // 组件控制的 angle轴
    filterMode: '', // 可选值filter/weakFilter/empty/none，详解如下
    start: 100, // 数据窗口范围的起始百分比。范围是：0~100, 表示0%~100%同下
    end: 100, // 数据窗口范围的结束百分比。范围是：0~100
    startValue: '', // 范围的起始数值，若设置了inside.start则失效
    endValue: '', // 范围的结束数值，若设置了inside.end则失效
    minSpan: 100, // 限制窗口大小的最小值（百分比值），取值范围是0~100，设置inside.minValueSpan则失效
    maxSpan: 100, // 限制窗口大小的最小值（百分比值），取值范围是0~100，设置inside.maxValueSpan则失效
    minValueSpan: '', // 用于限制窗口大小的最小值, 若时间轴上可设置为：3600*24*1000*5[时间轴接收的都是时间戳]表示5天,  在类目轴上可以设置为5表示5个类目
    maxValueSpan: '', // 用于限制窗口大小的最大值，用法同上
    orient: '', // 布局方式是横还是竖，可选值horizontal[水平]/vertical[竖直]
    zoomLock: false, // 是否锁定选择区域的大小，若设置为true则锁定选择区域的大小，也就是说，只能平移，不能缩放
    throttle: 100, // 设置触发视图刷新的频率。单位为毫秒（ms）
    rangeMode: '', // 详解如下
    zoomOnMouseWheel: true, // 触发方式, 可选值true[直接鼠标滚轮触发，默认]/false[滚轮不能触发]/shift[按住shift和滚轮触发]/ctrl[参考shift]/alt[参考shift]
    moveOnMouseMove: true, // 触发数据窗口平移方式，可选值参考zoomOnMouseWheel
    moveOnMouseWheel: true, // 触发数据窗口平移方式，可选值参考zoomOnMouseWheel
    preventDefaultMouseMove: true // 是否阻止mousemove事件的默认行为。
  }, {
    type: 'slider', // 类型, slider表示滑动条进行缩放
    id: '',
    show: true, //是否显示组件, 若设置为false，不显示组件，但数据过滤功能还存在
    backgroundColor: 'rgba(47,69,84,0)', // 组件的背景颜色
    dataBackground: { // 数据阴影的样式
      lineStyle: { // 阴影线条样式
        color: '#d2dbee',
        width: 0.5,
        type: 'solid', // 可选值solid/solid/dotted
        dashOffset: 0, // 设置虚线的偏移量
        cap: 'butt', // 指定线段末端的绘制方式，可选值butt[方形结束]/round[圆形结束]/square[以方形结束，但增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域]
        join: 'bevel',
        miterLimit: 10,
        shadowBlur: ...,
        shadowColor: ...,
        shadowOffsetX: 0 ,
        shadowOffsetY: 0 ,
        opacity: 1
      },
      areaStyle: {}
    }, 
    selectedDataBackground: {},
    fillerColor: '', // rgba(167,183,204,0.4)
    borderColor: '#ddd', // #ddd
    handleIcon: '', // 
    handleSize: '100%', // 
    handleStyle: {}, // 
    moveHandleIcon: '', // 
    moveHandleSize: 7, // 
    moveHandleStyle: {}, //
    labelPrecision: 'auto', // 
    labelFormatter: '', //
    showDetail: true, // 
    showDataShadow: 'auto', // 
    realtime: true, // 
    textStyle: {}, //
    xAxisIndex: '', // 同inside
    yAxisIndex: '', // 同inside
    radiusAxisIndex: '', // 同inside
    angleAxisIndex: '', // 同inside
    filterMode: 'filter', // 同inside
    start: 100, // 同inside
    end: 100, // 同inside
    startValue: '', // 同inside
    endValue: '', // 同inside
    minSpan: 100, // 同inside
    maxSpan: 100, // 同inside
    minValueSpan: '', // 同inside
    maxValueSpan: '', // 同inside
    orient: '', // 同inside
    zoomLock: false, // 同inside
    throttle: 100, // 同inside
    rangeMode: '', // 同inside, 详解如下
    zlevel: 0, // 
    z: 2, // 
    left: 'auto', // 
    top: '', //
    right: '', // 
    bottom: '', // 
    width: '', //
    height: '', // 
    brushSelect: true, // 
    brushStyle: {}, //
    emphasis: {} //
  }
]

💕解释xAxisIndex、yAxisIndex、radiusAxisIndex、angleAxisIndex的含义及用法，以xAxisIndex为例

option: {
    xAxis: [
        {...}, // 第一个 xAxis
        {...}, // 第二个 xAxis
        {...}, // 第三个 xAxis
        {...}  // 第四个 xAxis
    ],
    dataZoom: [
        { // 第一个 dataZoom 组件
            xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
        }, { // 第二个 dataZoom 组件
            xAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 xAxis
        }
    ]
}

💕 dataZoom.filterMode详解
filter：当前数据窗口外的数据，被 过滤掉。即会影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
weakFilter：当前数据窗口外的数据，被 过滤掉。即会影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
empty：当前数据窗口外的数据，被 设置为空。即不会影响其他轴的数据范围。
none：不过滤数据，只改变数轴范围。