dataZoom 组件
dataZoom基本知识
- dataZoom组件主要是通过对数轴的控制来达到数轴/窗口显示范围
- dataZoom运行原理是通过 数据过滤 以及在内部设置轴的显示窗口来达到 数据窗口缩放的效果（filterMode）
- 数据窗口的设置，start/end-百分比，startValue/endValue-值
- start与end的范围和坐标系中的y轴大小设置有关
具体查看
type为inside-内置型数据区域缩放组件（粗体部分属于共同拥有的属性）
| 属性 | 值类型 | 值 | 释意 |
|---|
| type | string | inside | 内置型数据区域缩放组件 |
| disabled | boolean | true/false | 是否停止组件的功能 |
| xAxisIndex | number/Array | - | 设置组件控制的x轴 |
| yAxisIndex | number/Array | - | 设置组件控制的y轴 |
| radiusAxisIndex | number/Array | - | 设置 dataZoom-inside 组件控制的 radius 轴 |
| angleAxisIndex | number/Array | - | 设置 dataZoom-inside 组件控制的 angle 轴 |
| filterMode | string | filter/weakFilter/empty/none | 数据过滤模式 |
| start | number | 1-100 | 数据窗口范围的起始百分比 |
| end | number | 1-100 | 数据窗口范围的结束百分比 |
| startValue | number/string/Date | - | 数据窗口范围的起始数值 |
| endValue | number/string/Date | - | 数据窗口范围的结束数值 |
| minSpan | number | 1-100 | 用于限制窗口大小的最小值（百分比值） |
| maxSpan | number | 1-100 | 用于限制窗口大小的最大值（百分比值） |
| minValueSpan | number/string/Date | - | 用于限制窗口大小的最小值（实际数值） |
| maxValueSpan | number/string/Date | - | 用于限制窗口大小的最大值（实际数值） |
| orient | string | horizontal/vertical | 布局方式是横还是竖 |
| zoomLock | boolean | - | 是否锁定选择区域（或叫做数据窗口）的大小 |
| throttle | number | - | 设置触发视图刷新的频率 |
| rangeMode | Array | value/percent | |
| zoomOnMouseWheel | boolean/string | shift/ctrl/alt | 如何触发缩放 |
| moveOnMouseMove | boolean/string | shift/ctrl/alt | 如何触发数据窗口平移 |
| moveOnMouseWheel | - | - | 同上，但经过普通验证证明上边的好用 |
| preventDefaultMouseMove | boolean | - | 是否阻止 mousemove 事件的默认行为 |
type为slider-滑动条型数据区域缩放组件
| 属性 | 值类型 | 值 | 释意 |
|---|
| show | boolean | - | 是否显示组件 |
| backgroundColor | - | - | 组件的背景颜色 |
| dataBackground | - | lineStyle/areaStyle | 数据阴影的样式 |
| selectedDataBackground | - | lineStyle/areaStyle | 选中部分数据阴影的样式 |
| fillerColor | - | - | 选中范围的填充颜色 |
| borderColor | - | - | - |
| handle相关 | - | - | - |
| showDetail | boolean | - | 是否显示detail，即拖拽时候显示详细数值信息 |
| showDataShadow | - | boolean/auto | 是否在 dataZoom-silder 组件中显示数据阴影 |
| realtime | boolean | - | 拖动时，是否实时更新系列的视图 |
| textStyle | - | - | - |
| zlevel | - | - | - |
| z | - | - | - |
| left | - | - | - |
| top | - | - | - |
| right | - | - | - |
| bottom | - | - | - |
| brushSelect | boolean | - | 是否开启刷选功能 |
| brushStyle | - | - | 刷选框样式设置 |
| emphasis | | handleStyle/moveHandleStyle | 高亮样式设置 |
1、dataBackground的areaStyle
2、dataBackground的lineStyle
3、textStyle
4、handle的icon/size/与style
5、selectedDataBackground的areaStyle
6、selectedDataBackgroundlineStyle
7、handle相关的moveHandleIcon/Size/Style
参考api文档
