roam

全局漫游组件。

提示

全局漫游组件为以下场景提供支持

1.ECharts 官方不支持漫游的组件（比如旭日图、桑基图等）

2.多系列的场景（ECharts 原生系列下的 roam 仅对单系列生效，详见示例）

3.包含坐标轴的关系图（比如蜂群图）

注意

需要注意，不要将roam与dataZoom混淆，dataZoom适用于笛卡尔坐标系，即二维坐标系，roam适用于关系图/极坐标场景

当前适配进度：

蜂群图
桑基图
旭日图
关系图

其他图表暂未经过适配&测试，可能存在问题。

注意

全局漫游组件不可与 ECharts 原生系列下的 roam 配置项同时启用

比如：关系图-roam 配置项

实时调试预览

自定义配置项

roam 是新开发的的组件，这里的配置项不加dv前缀以区分 ECharts 配置项

`center`

类型 [number|string, number|string]

初始化视角的中心点。可以是包含两个 number 类型（表示像素值）或 string 类型（表示相对容器的百分比）的数组。

`zoom`

类型 number

初始化视角的缩放比例。

`panRatio`

类型 number
默认值 1

移动端不同设备的交互灵敏度有所差异，这里提供一个倍率，允许业务方基于不同的设备进行灵敏度适配

`zoomRatio`

类型 number
默认值 1

移动端不同设备的交互灵敏度有所差异，这里提供一个倍率，允许业务方基于不同的设备进行灵敏度适配

`roamLimit`

提示

当内容大小超出画布后，限制行为会有所更新

类型 boolean
默认值 true

是否限制内容不超出画布边缘

`panDirection`

类型 'x|y' | 'x' | 'y' | 'xy'
默认值 xy

平移方向，可以限制图表内容仅在一个方向上平移

当设置为 'x|y'时，平移方向会自适应

Action

这里的 API 需要通过 ECharts 实例的 dispatchAction 方法调用。

`dvRoam`

'dvRoam'

触发平移/缩放

dispatchAction({
  type: 'dvRoam',
  dx: number,
  dy: number,
  zoomX: number,
  zoomY: number,
  zoomDelta: number,
  animation: AnimationConfig,
});

事件

`dvroam`

监听漫游事件

`dvbeforeroam`

漫游行为生效前的生命周期

`dvafterroam`

漫游行为生效后的声明周期

`dvroamoverflow`

开启roamLimit配置项后，漫游行为中碰壁的事件

没有做节流和防抖的处理，适用于判断第一次碰壁等场景。

`dvroamoverflowend`

开启roamLimit配置项后，漫游行为碰壁后，计算的碰壁方向

300ms 的防抖处理，只会在漫游行为停止后触发一次，适用于获取碰壁方向的场景。

实时调试预览​

自定义配置项​

center​

zoom​

panRatio​

zoomRatio​

roamLimit​

panDirection​

Action​

dvRoam​

事件​

dvroam​

dvbeforeroam​

dvafterroam​

dvroamoverflow​

dvroamoverflowend​