Apache ECharts 中的数据区域缩放组件提供了交互式数据范围选择功能,允许用户在数据可视化中进行缩放和平移。当处理大型数据集或时间序列数据时,用户需要关注数据的特定部分,此组件尤为有用。
数据区域缩放组件支持用户通过多种交互模式调整显示的数据范围。它可以应用于各种坐标系中的不同轴,包括笛卡尔坐标系(x/y轴)和极坐标系(角度/半径)。
来源:test/dataZoom-scroll.html104-132 test/dataZoom-scatter-hv-polar.html80-93
ECharts 提供了两种主要的数据区域缩放组件类型
内置数据区域缩放允许使用鼠标或触摸操作直接与图表区域进行交互。它不创建额外的用户界面元素,而是直接在图表内进行缩放和平移。
主要功能
滑动条数据区域缩放创建一个专用用户界面组件,带有用户可以拖动的滑块来选择数据范围。它以导航栏的形式出现,直观地表示完整的数据范围。
主要功能
来源:test/dataZoom-scroll.html123-131 test/dataZoom-scatter-hv-polar.html80-92
下图说明了数据区域缩放组件如何与 ECharts 系统的其他部分集成
来源:test/dataZoom-scroll.html105-132 test/dataZoom-scatter-hv-polar.html80-93 test/dataZoom-scatter-hv-polar.html123-171
数据区域缩放组件提供了广泛的配置选项
| 选项 | 类型 | 描述 |
|---|---|---|
类型 | 字符串 | 数据区域缩放类型:'inside' 或 'slider' |
xAxisIndex | number/Array | 控制X轴的索引(可为多个) |
yAxisIndex | number/Array | 控制Y轴的索引(可为多个) |
angleAxisIndex | number/Array | 控制角度轴的索引(可为多个) |
radiusAxisIndex | number/Array | 控制半径轴的索引(可为多个) |
start | 数字 | 选中范围的起始百分比(0-100) |
end | 数字 | 选中范围的结束百分比(0-100) |
zoomOnMouseWheel | 布尔值 | 是否启用鼠标滚轮缩放 |
moveOnMouseWheel | 布尔值 | 是否启用鼠标滚轮平移 |
zoomLock | 布尔值 | 是否锁定缩放范围(仅允许平移) |
orient | 字符串 | 对于滑动条类型:'horizontal' 或 'vertical' |
disabled | 布尔值 | 是否禁用数据区域缩放组件 |
来源:test/dataZoom-scroll.html105-122 test/dataZoom-scatter-hv-polar.html125-170
下图显示了数据区域缩放实例的核心结构
来源:test/dataZoom-scroll.html105-122 test/dataZoom-scatter-hv-polar.html123-171
在笛卡尔坐标系中,数据区域缩放组件可以控制X轴、Y轴或两者。
来源:test/dataZoom-scroll.html105-132
对于极坐标系,数据区域缩放组件可以控制角度轴、半径轴或两者。
来源:test/dataZoom-scatter-hv-polar.html80-93 test/dataZoom-scatter-hv-polar.html123-171
数据区域缩放组件提供了对鼠标和触摸交互的详细控制
您可以指定鼠标滚轮执行缩放还是平移操作
来源:test/dataZoom-scroll.html107-122
当处理方向反转的轴(inverse: true)时,ECharts 保持一致的滚动行为
来源:test/dataZoom-scroll.html149-241
数据区域缩放组件对于时间序列数据特别有用,用户需要详细检查特定时间段时可以使用它。
当可视化大型数据集时,数据区域缩放组件允许用户关注特定数据段。
来源:test/largeScatterWithEmpty.html81-111
start 和 end 来显示有意义的初始视图zoomOnMouseWheel 和 moveOnMouseWheel来源:test/largeScatterWithEmpty.html107-109 test/dataZoom-scroll.html107-122
有关 ECharts 系统中的其他相关组件,请参阅