Echart选中事件-geoselectchanged ｜geoselected ｜ geounselected

geoselectchanged

Event

ACTION: geoToggleSelect

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

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

{
    type: 'geoselectchanged',
    // 系列 ID，可以在 option 中传入
    seriesId: string,
    // 数据名称
    name: name,
    // 每个 geo 组件的选中信息列表。
    // allSelected 从 `v5.1.0` 开始支持
    allSelected: ({
        geoIndex: number
        // 每个 geo 组件上选中的名称列表。
        name: string[]
    })[],
    // 不推荐使用此属性。
    // 所有数据的选中状态表。
    // 不同 geo 组件的状态会被合并在一起。
    selected: {
        [name: string]: boolean
    }
}

geoselected

Event

ACTION: geoSelect

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

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

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

geounselected

Event

ACTION: geoUnSelect

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

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

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

实例：

 <ReactEcharts
        style={{
          width: '100%',
          height: '100%',
        }}
        onChartReady={(charts) => {
          // console.log(charts,'<--')
          echartsRef.current = charts;
          echartsRef.current.dispatchAction({
            type: 'geoSelect',
            geoIndex: 0,
            // geo 组件中 region 名称。
            // 可以是一个数组指定多个名称。
            name: cityList[cityIndex.current],
          });
          triggerEvent(cityList[cityIndex.current]);
         // console.log(cityList[cityIndex.current], '<--cityList[cityIndex.current]')
          geochangeStart();
        }}
        ref={clickRef}
        notMerge={true}
        // 点击事件卡顿
        // lazyUpdate={true}
        onEvents={{
          // click: clickItem,
          geoselectchanged: geoselectchanged,
        }}
        option={options}
      />

 

const geoselectchanged = (event) => {
    clearGeoChange();
    if ((event.type = 'geoselectchanged')) {
      const index = cityList.findIndex(item => item === event.name);
      cityIndex.current = index;
      triggerEvent(event.name);
      // setCurrentItem(event.name);
      // console.log(event, "@@@@@@@")
    }
    delayTimer.current = setTimeout(() => {
      delayTimer.current = null;
      geochangeStart();
    }, 1000 * 10);
    //1000 * 10
  };


onclick=()>{
const event = {
 type: 'geoselectchanged', allSelected:[{geoIndex:0,name:[]}],name: item ,selected: {
                  "云冈区": false,
                  "云州区": false,
                  "天镇县": false,
                  "左云县": false,
                  "平城区": false,
                  "广灵县": false,
                  "新荣区": false,
                  "浑源县": false,
                  "灵丘县": false,
                  "阳高县": false,
                }}
                geoselectchanged(event);
}

 echartsRef.current.dispatchAction({
                  type: 'geoSelect',
                  geoIndex:0,
                  // geo 组件中 region 名称。
                  // 可以是一个数组指定多个名称。
                  name: item,
                });