echarts 数据区域缩放

echarts 数据区域缩放

官方文档：Documentation - Apache ECharts

*********************

配置属性

****************

内置型组件（鼠标拖拽、鼠标滚轮、触屏手指滑动实现区域缩放）

基本属性

dataZoom.type：缩放组件类型，inside（内置组件）、slider（滑动条）
dataZoom.id：组件id，默认不指定
dataZoom.disabled：是否停止组件功能，默认false

dataZoom.start：数据窗口范围的起始百分比，范围是：0 ~ 100，表示0% ~ 100%
dataZoom.end：数据窗口范围的结束百分比，范围是：0 ~ 100
dataZoom.startValue：数据窗口范围的起始数值，如果设置start，startValue失效
dataZoom.endValue：数据窗口范围的结束数值，如果设置end，endValue失效

dataZoom.minSpan：窗口最小值（百分比），范围是 0 ~ 100，如果设置了minValueSpan，minSpan失效
dataZoom.maxSpan：窗口最大值（百分比），范围是 0 ~ 100
dataZoom.minValueSpan：窗口最小值（实际数值）
dataZoom.maxValueSpan：窗口最大值（实际数值）

dataZoom.orient：布局方式，可选值：horizontal、vertical
dataZoom.zoomLock：是否锁定窗口大小，若为true，则只能平移，不能缩放，默认false
dataZoom.throttle：视图刷新的频率，单位为毫秒（ms），默认100ms

dataZoom.rangeMode：范围模式，可选值value、percent，默认自动设置
如果指定了start、end，rangeMode设为percent
如果指定了startValue、endValue，rangeMode设为value

dataZoom.preventDefaultMouseMove：是否阻止mousemove事件的默认行为，默认true

组件控制的坐标轴

dataZoom.xAxisIndex：组件缩放的x轴index，可为多个
dataZoom.yAxisIndex：组件缩放的y轴index，可为多个
dataZoom.radiusAxisIndex：缩放组件控制的radius轴，可为多个
dataZoom.angleAxisIndex：缩放组件控制的angle轴，可为多个

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

过滤模式

dataZoom.filterMode：过滤模式，可选值
filter：每个数据项，只要有一个维度（一个数据可能会有多个维度）在数据窗口外，整个数据项就会被过滤掉，会影响其他轴的数据范围
weakFilter：每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉，会影响其他轴的数据范围
empty：当前数据窗口外的数据设置为空，不会影响其他轴的数据范围
none：不过滤数据，只改变本数轴范围，不会影响其他轴的数据范围

# 过滤模式设置（仅供参考），具体需根据需求进行设置
只有x轴或者y轴受缩放组件控制，filterMode设置为filter
x轴、y轴都受缩放组件控制：x轴、y轴互不影响，两个都可设置为empty
x轴、y轴都受缩放组件控制：x轴为主、y轴为辅（如用柱状图展示产品销量，x轴产品，y轴销量），x轴设置为filter，y轴设置为empty

控制区域缩放（鼠标滚动）

dataZoom.zoomOnMouseWheel：如何触发缩放，可选值
true：不按任何功能键，鼠标滚轮能触发缩放，默认
false：鼠标滚轮不能触发缩放
shift：按住shift和鼠标滚轮能触发缩放
ctrl：按住ctrl和鼠标滚轮能触发缩放
alt：按住alt和鼠标滚轮能触发缩放

控制窗口平移（鼠标移动）

dataZoom.moveOnMouseMove：如何触发数据窗口平移，可选值
true：不按任何功能键，鼠标移动能触发数据窗口平移，默认
false：鼠标移动不能触发平移
shift：按住shift和鼠标移动能触发数据窗口平移
ctrl：按住ctrl和鼠标移动能触发数据窗口平移
alt：按住alt和鼠标移动能触发数据窗口平移

控制窗口平移（鼠标滚动）

dataZoom.moveOnMouseWheel：如何触发数据窗口平移，可选值
true：不按任何功能键，鼠标滚轮能触发数据窗口平移，默认
false：鼠标滚轮不能触发平移
shift：按住shift和鼠标滚轮能触发数据窗口平移
ctrl：按住ctrl和鼠标滚轮能触发数据窗口平移
alt：按住alt和鼠标滚轮能触发数据窗口平移