菜单

数据区域缩放

相关源文件

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'
xAxisIndexnumber/Array控制X轴的索引(可为多个)
yAxisIndexnumber/Array控制Y轴的索引(可为多个)
angleAxisIndexnumber/Array控制角度轴的索引(可为多个)
radiusAxisIndexnumber/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轴)

在笛卡尔坐标系中,数据区域缩放组件可以控制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

最佳实践

  1. 结合内置数据区域缩放和滑动条数据区域缩放 - 同时使用这两种类型为不同的用户偏好提供了灵活性
  2. 设置合适的初始范围 - 使用 startend 来显示有意义的初始视图
  3. 控制鼠标滚轮行为 - 根据您的应用需求配置 zoomOnMouseWheelmoveOnMouseWheel
  4. 处理空数据点 - 数据区域缩放组件正确处理用 '-' 标记的缺失数据点

来源:test/largeScatterWithEmpty.html107-109 test/dataZoom-scroll.html107-122

有关 ECharts 系统中的其他相关组件,请参阅