一、Echarts中的action

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

1.highlight 高亮指定的數(shù)據(jù)圖形

dispatchAction({

type: 'highlight',

// 可選，系列 index，可以是一個數(shù)組指定多個系列

seriesIndex?: number|Array,

// 可選，系列名稱，可以是一個數(shù)組指定多個系列

seriesName?: string|Array,

// 可選，數(shù)據(jù)的 index

dataIndex?: number,

// 可選，數(shù)據(jù)的 名稱

name?: string

})

2.downplay 取消高亮指定的數(shù)據(jù)圖形

dispatchAction({

type: 'downplay',

// 可選，系列 index，可以是一個數(shù)組指定多個系列

seriesIndex?: number|Array,

// 可選，系列名稱，可以是一個數(shù)組指定多個系列

seriesName?: string|Array,

// 可選，數(shù)據(jù)的 index

dataIndex?: number,

// 可選，數(shù)據(jù)的 名稱

name?: string

})

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

1)legendSelect(選中圖例)

dispatchAction({

type: 'legendSelect',

// 圖例名稱

name: string

})

2)legendUnSelect(取消選中圖例)

dispatchAction({

type: 'legendUnSelect',

// 圖例名稱

name: string

})

3)legendToggleSelect(切換圖例的選中狀態(tài))

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. | String | Function

})

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

dispatch({

type: 'showTip',

// 系列的 index，在 tooltip 的 trigger 為 axis 的時候可選。

seriesIndex?: number,

// 數(shù)據(jù)的 index，如果不指定也可以通過 name 屬性根據(jù)名稱指定數(shù)據(jù)

dataIndex?: number,

// 可選，數(shù)據(jù)名稱，在有 dataIndex 的時候忽略

name?: string,

// 本次顯示 tooltip 的位置。只在本次 action 中生效。

// 缺省則使用 option 中定義的 tooltip 位置。

position: Array.|string|Function,

})

2)hideTip 隱藏提示框

dispatchAction({

type:'hideTip'

})

5.數(shù)據(jù)區(qū)域縮放組件、視覺映射組件、時間軸組件、工具欄組件相關行為

數(shù)據(jù)區(qū)域縮放組件,必須引入數(shù)據(jù)區(qū)域縮放組件之后才能使用(dataZoom)

dispatchAction({

type: 'dataZoom',

// 可選，dataZoom 組件的 index，多個 dataZoom 組件時有用，默認為 0

dataZoomIndex: number,

// 開始位置的百分比，0 - 100

start: number,

// 結束位置的百分比，0 - 100

end: number,

// 開始位置的數(shù)值

startValue: number,

// 結束位置的數(shù)值

endValue: number

})

2.關閉或啟動toolbox中的dataZoom的刷選狀態(tài)(takeGlobalCursor)

myChart.dispatchAction({

type: 'takeGlobalCursor',

key: 'dataZoomSelect',

// 啟動或關閉

dataZoomSelectActive: true

});

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

dispatchAction({

type: 'selectDataRange',

// 可選，visualMap 組件的 index，多個 visualMap 組件時有用，默認為 0

visualMapIndex: number,

// 連續(xù)型 visualMap 和 離散型 visualMap 不一樣

// 連續(xù)型的是一個表示數(shù)值范圍的數(shù)組。

// 離散型的是一個對象，鍵值是類目或者分段的索引。值是 `true`, `false`

selected: Object|Array

})

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

dispatchAction({

type: 'timelineChange',

// 時間點的 index

currentIndex: number

})

2)切換時間軸的播放狀態(tài)：timelinePlayChange

dispatchAction({

type: 'timelinePlayChange',

// 播放狀態(tài)，true 為自動播放

playState: boolean

})

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

dispatchAction({

type: 'restore'

})

6.餅圖、地圖組件、地圖圖表、關系圖、區(qū)域選擇相關行為1)餅圖

選中指定的餅圖扇形(pieSelect)

取消選中指定的餅圖扇形(pieUnSelect)

切換指定的選中的餅圖扇形狀態(tài)(pieToggleSelect)

dispatchAction({

type: 'pieSelect | pieUnSelect | pieToggleSelect',

// 可選，系列 index，可以是一個數(shù)組指定多個系列

seriesIndex?: number|Array,

// 可選，系列名稱，可以是一個數(shù)組指定多個系列

seriesName?: string|Array,

// 數(shù)據(jù)的 index，如果不指定也可以通過 name 屬性根據(jù)名稱指定數(shù)據(jù)

dataIndex?: number,

// 可選，數(shù)據(jù)名稱，在有 dataIndex 的時候忽略

name?: string

})

2)地圖組件

選中指定的地圖區(qū)域(geoSelect)

取消選中的指定地圖區(qū)域(geoUnSelect)

切換指定的地圖區(qū)域的選中狀態(tài)(geoToggleSelect)

dispatchAction({

type: 'geoSelect | geoUnSelect | geoToggleSelect',

// 可選，系列 index，可以是一個數(shù)組指定多個系列

seriesIndex?: number|Array,

// 可選，系列名稱，可以是一個數(shù)組指定多個系列

seriesName?: string|Array,

// 數(shù)據(jù)的 index，如果不指定也可以通過 name 屬性根據(jù)名稱指定數(shù)據(jù)

dataIndex?: number,

// 可選，數(shù)據(jù)名稱，在有 dataIndex 的時候忽略

name?: string

})

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

選中指定的地圖區(qū)域(mapSelect)

取消選中的指定地圖區(qū)域(mapUnSelect)

切換指定的地圖區(qū)域的選中狀態(tài)(mapToggleSelect)

dispatchAction({

type: 'mapToggleSelect',

// 可選，系列 index，可以是一個數(shù)組指定多個系列

seriesIndex?: number|Array,

// 可選，系列名稱，可以是一個數(shù)組指定多個系列

seriesName?: string|Array,

// 數(shù)據(jù)的 index，如果不指定也可以通過 name 屬性根據(jù)名稱指定數(shù)據(jù)

dataIndex?: number,

// 可選，數(shù)據(jù)名稱，在有 dataIndex 的時候忽略

name?: string

})

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

focusNodeAdjacency 將指定的節(jié)點以及其周邊相鄰的節(jié)點高亮

unFocusNodeAdjacency 將指定的節(jié)點以及其周邊相鄰的節(jié)點取消高亮

5)區(qū)域選擇相關的行為

brush：觸發(fā)此action可設置或刪除chart中的選框

takeGlobalCursor：刷選模式的開關。使用此Action可將當前鼠標變?yōu)樗⑦x狀態(tài)

dispatchAction({

type: 'takeGlobalCursor',

// 如果想變?yōu)?ldquo;可刷選狀態(tài)”，必須設置。不設置則會關閉“可刷選狀態(tài)”。

key: 'brush',

brushOption: {

// 參見 brush 組件的 brushType。如果設置為 false 則關閉“可刷選狀態(tài)”。

brushType: string,

// 參見 brush 組件的 brushMode。如果不設置，則取 brush 組件的 brushMode 設置。

brushMode: string

}

});