十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全

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

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

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

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

---

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

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