ECharts 入门教程 ECharts地图区域处理事件

2024-02-25 开发教程 ECharts 入门教程匿名 6℃

ECharts 中有两种方式的地图区域处理：

一种是在 geo 中；
另一种是在 series-map 中

geo 的情况下：

events.geoselectchanged | Event

ACTION: geoToggleSelect

geo 中地图区域切换选中状态的事件。

用户点击选中会触发该事件。

{
    type: 'geoselectchanged',
    // 系列 ID，可以在 option 中传入
    seriesId: string
    // 数据名称
    name: name,
    // 所有数据的选中状态表。
    selected: Object
}

events.geoselected | Event

ACTION: geoSelect

geo 中地图区域选中后的事件。

使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 geoselectchanged）。

{
    type: 'geoselected',
    // 系列 ID，可以在 option 中传入
    seriesId: string
    // 数据名称
    name: name,
    // 所有数据的选中状态表。
    selected: Object
}

events.

geounselected

| Event

ACTION: geoUnSelect

geo 中地图区域取消选中后的事件。

使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 geoselectchanged）。

{
    type: 'geounselected',
    // 系列 ID，可以在 option 中传入
    seriesId: string
    // 数据名称
    name: name,
    // 所有数据的选中状态表。
    selected: Object
}

series-map 的情况下：

events.mapselectchanged | Event

ACTION: mapToggleSelect

series-map 中地图区域切换选中状态的事件。

用户点击选中会触发该事件。

{
    type: 'mapselectchanged',
    // 系列 ID，可以在 option 中传入
    seriesId: string
    // 数据名称
    name: name,
    // 所有数据的选中状态表。
    selected: Object
}

注：该事件同 ECharts 2 中的 mapSelected 事件相同。

events.mapselected | Event

ACTION: mapSelect

series-map 中地图区域选中后的事件。

使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 mapselectchanged）。

{
    type: 'mapselected',
    // 系列 ID，可以在 option 中传入
    seriesId: string
    // 数据名称
    name: name,
    // 所有数据的选中状态表。
    selected: Object}

注： ECharts 2.x 中用户开关图例对应的事件从 mapselected 改为 mapselectchanged。

events.mapunselected | Event

ACTION: mapUnSelect

series-map 中地图区域取消选中后的事件。

使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 mapselectchanged）。

{
    type: 'mapunselected',
    // 系列 ID，可以在 option 中传入
    seriesId: string
    // 数据名称
    name: name,
    // 所有数据的选中状态表。
    selected: Object
}

上一节： ECharts工具栏事件

下一节： ECharts饼图扇形选中事件

"ECharts 入门教程"的目录

ECharts 入门教程 ECharts地图区域处理事件

geo 的情况下 ：

series-map 的情况下：

geo 的情况下：