Echarts 常用API之action行為

一、Echarts中的action

echarts中支持的圖表行為，通過dispatchAction觸發。

1.highlight 高亮指定的數據圖形

dispatchAction({
    type: 'highlight',
    // 可選，系列 index，可以是一個數組指定多個系列
    seriesIndex?: number|Array,
    // 可選，系列名稱，可以是一個數組指定多個系列
    seriesName?: string|Array,
    // 可選，數據的 index
    dataIndex?: number,
    // 可選，數據的 名稱
    name?: string
})

2.downplay 取消高亮指定的數據圖形

dispatchAction({
    type: 'downplay',
    // 可選，系列 index，可以是一個數組指定多個系列
    seriesIndex?: number|Array,
    // 可選，系列名稱，可以是一個數組指定多個系列
    seriesName?: string|Array,
    // 可選，數據的 index
    dataIndex?: number,
    // 可選，數據的 名稱
    name?: string
})

3.圖例相關的行為，必須引入圖例組件之后才能使用

1）legendSelect（選中圖例）

dispatchAction({
    type: 'legendSelect',
    // 圖例名稱
    name: string
})

2）legendUnSelect（取消選中圖例）

dispatchAction({
    type: 'legendUnSelect',
    // 圖例名稱
    name: string
})

3）legendToggleSelect（切換圖例的選中狀態）

dispatchAction({
    type: 'legendToggleSelect',
    // 圖例名稱
    name: string
})

4）legendScroll（控制圖例的滾動），當legend.type是scroll的時候有效

dispatchAction({
    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})

4. 提示框組件相關行為，必須引入提示框組件之后才能引用

1）showTip（顯示提示框）
有兩種使用方式
A：指定在相對容器的位置處顯示提示框，如果指定的位置無法顯示則無效。

dispatchAction({
    type:'showTip',
    //屏幕上的x坐標
    x: number,
    //屏幕上的y坐標
    y: number,
    //本次顯示tooltip的位置，只在本次action生效。缺省則使用option中定義的tooltip位置
    position: Array.<number> | String | Function
})

B: 指定數據圖形，根據tooltip的配置項進行顯示提示框

dispatch({
    type: 'showTip',
    // 系列的 index，在 tooltip 的 trigger 為 axis 的時候可選。
    seriesIndex?: number,
    // 數據的 index，如果不指定也可以通過 name 屬性根據名稱指定數據
    dataIndex?: number,
    // 可選，數據名稱，在有 dataIndex 的時候忽略
    name?: string,
    // 本次顯示 tooltip 的位置。只在本次 action 中生效。
    // 缺省則使用 option 中定義的 tooltip 位置。
    position: Array.<number>|string|Function,
})

2）hideTip 隱藏提示框

dispatchAction({
    type:'hideTip'
})

5.數據區域縮放組件、視覺映射組件、時間軸組件、工具欄組件相關行為

1. 數據區域縮放組件,必須引入數據區域縮放組件之后才能使用（dataZoom）

dispatchAction({
    type: 'dataZoom',
    // 可選，dataZoom 組件的 index，多個 dataZoom 組件時有用，默認為 0
    dataZoomIndex: number,
    // 開始位置的百分比，0 - 100
    start: number,
    // 結束位置的百分比，0 - 100
    end: number,
    // 開始位置的數值
    startValue: number,
    // 結束位置的數值
    endValue: number
})

2.關閉或啟動toolbox中的dataZoom的刷選狀態（takeGlobalCursor）

myChart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'dataZoomSelect',
    // 啟動或關閉
    dataZoomSelectActive: true
});

3.視覺映射組件，只能在引入視覺映射組件之后才能使用（visualMap）
選取映射的數值范圍：selectDataRange

dispatchAction({
    type: 'selectDataRange',
    // 可選，visualMap 組件的 index，多個 visualMap 組件時有用，默認為 0
    visualMapIndex: number,
    // 連續型 visualMap 和 離散型 visualMap 不一樣
    // 連續型的是一個表示數值范圍的數組。
    // 離散型的是一個對象，鍵值是類目或者分段的索引。值是 `true`, `false`
    selected: Object|Array
})

4.時間軸組件，同理引入之后才能使用
1）設置當前的時間點：timelineChange

dispatchAction({
    type: 'timelineChange',
    // 時間點的 index
    currentIndex: number
})

2)切換時間軸的播放狀態：timelinePlayChange

dispatchAction({
    type: 'timelinePlayChange',
    // 播放狀態，true 為自動播放
    playState: boolean
})

5.工具欄組件相關行為，同理引入之后才能使用
重置option：restore

dispatchAction({
    type: 'restore'
})

6.餅圖、地圖組件、地圖圖表、關系圖、區域選擇相關行為
1）餅圖

• 選中指定的餅圖扇形（pieSelect）
• 取消選中指定的餅圖扇形（pieUnSelect）
• 切換指定的選中的餅圖扇形狀態（pieToggleSelect）

dispatchAction({
    type: 'pieSelect | pieUnSelect | pieToggleSelect',
    // 可選，系列 index，可以是一個數組指定多個系列
    seriesIndex?: number|Array,
    // 可選，系列名稱，可以是一個數組指定多個系列
    seriesName?: string|Array,
    // 數據的 index，如果不指定也可以通過 name 屬性根據名稱指定數據
    dataIndex?: number,
    // 可選，數據名稱，在有 dataIndex 的時候忽略
    name?: string
})

2)地圖組件

• 選中指定的地圖區域（geoSelect）
• 取消選中的指定地圖區域（geoUnSelect）
• 切換指定的地圖區域的選中狀態（geoToggleSelect）

dispatchAction({
    type: 'geoSelect | geoUnSelect | geoToggleSelect',
    // 可選，系列 index，可以是一個數組指定多個系列
    seriesIndex?: number|Array,
    // 可選，系列名稱，可以是一個數組指定多個系列
    seriesName?: string|Array,
    // 數據的 index，如果不指定也可以通過 name 屬性根據名稱指定數據
    dataIndex?: number,
    // 可選，數據名稱，在有 dataIndex 的時候忽略
    name?: string
})

3)地圖圖表組件
同地圖組件類似，也有三個行為，如下：

• 選中指定的地圖區域（mapSelect）
• 取消選中的指定地圖區域（mapUnSelect）
• 切換指定的地圖區域的選中狀態（mapToggleSelect）

dispatchAction({
    type: 'mapToggleSelect',
    // 可選，系列 index，可以是一個數組指定多個系列
    seriesIndex?: number|Array,
    // 可選，系列名稱，可以是一個數組指定多個系列
    seriesName?: string|Array,
    // 數據的 index，如果不指定也可以通過 name 屬性根據名稱指定數據
    dataIndex?: number,
    // 可選，數據名稱，在有 dataIndex 的時候忽略
    name?: string
})

4)關系圖
關系圖行為使用，也得引入關系圖

• focusNodeAdjacency 將指定的節點以及其周邊相鄰的節點高亮
• unFocusNodeAdjacency 將指定的節點以及其周邊相鄰的節點取消高亮

5）區域選擇相關的行為

• brush：觸發此action可設置或刪除chart中的選框
• takeGlobalCursor：刷選模式的開關。使用此Action可將當前鼠標變為刷選狀態

dispatchAction({
    type: 'takeGlobalCursor',
    // 如果想變為“可刷選狀態”，必須設置。不設置則會關閉“可刷選狀態”。
    key: 'brush',
    brushOption: {
        // 參見 brush 組件的 brushType。如果設置為 false 則關閉“可刷選狀態”。
        brushType: string,
        // 參見 brush 組件的 brushMode。如果不設置，則取 brush 組件的 brushMode 設置。
        brushMode: string
    }
});