echarts配置項:brush
brush
brush
是區域選擇元件,使用者可以選擇圖中一部分資料,從而便於向用戶展示被選中資料,或者他們的一些統計計算結果。
目前 brush
元件支援的圖表型別:scatter
、bar
、candlestick
(parallel
本身自帶刷選功能,但並非由 brush 元件來提供)。
支援這幾種選框:矩形刷子
,任意形狀刷子
,橫向刷子
,縱向刷子
。參見 brush.toolbox。
可以使用 保持選擇
按鈕,切換單選和多選模式。
- 單選即同時只能存在一個選框,可單擊空白區域消除選框。
- 多選即同時可存在多個選框,單擊空白區域不能消除選框,需要點選『清除按鈕』消除線框
刷選和座標系的關係
可以設定 brush
是『全域性的』還是『屬於座標系的』。
全域性 brush
在 echarts 例項中任意地方刷選。這是預設情況。如果沒有指定為『座標系 brush』,就是『全域性 brush』。
座標系 brush
在 指定的座標系中刷選。選框可以跟隨座標系的縮放和平移(roam 和 dataZoom)而移動。
座標系 brush 實際更為常用,尤其是在 geo 中。
這幾個配置項的取值可以是:
'all'
,表示所有number
,如0
,表示這個 index 所對應的座標系。Array
,如[0, 4, 2]
,表示指定這些 index 所對應的座標系。'none'
null
或undefined
,表示不指定。
例如:
option = {
geo: {
...
},
brush: {
geoIndex: 'all', // 只可以在所有 geo 座標系中刷選,也就是上面定義的 geo 元件中。
...
}
};
例如:
option = { grid: [ {...}, // grid 0 {...} // grid 1 ], xAxis: [ {gridIndex: 1, ...}, // xAxis 0,屬於 grid 1。 {gridIndex: 0, ...} // xAxis 1,屬於 grid 0。 ], yAxis: [ {gridIndex: 1, ...}, // yAxis 0,屬於 grid 1。 {gridIndex: 0, ...} // yAxis 1,屬於 grid 0。 ], brush: { xAxisIndex: [0, 1], // 只可以在 xAxisIndex 為 `0` 和 `1` 的 xAxis 所在的直角座標系中刷選。 ... } };
使用 API 控制選框
可以通過呼叫 dispatchAction
來用程式主動渲染選框,例如:
myChart.dispatchAction({
type: 'brush',
areas: [
{
geoIndex: 0,
// 指定選框的型別。
brushType: 'polygon',
// 指定選框的形狀。
coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]
}
]
});
詳細配置
brush.toolbox:
使用在 toolbox 中的按鈕。
brush 相關的 toolbox 按鈕有:
'rect'
:開啟矩形選框選擇功能。'polygon'
:開啟任意形狀選框選擇功能。'lineX'
:開啟橫向選擇功能。'lineY'
:開啟縱向選擇功能。'keep'
:切換『單選』和『多選』模式。後者可支援同時畫多個選框。前者支援單擊清除所有選框。'clear'
:清空所有選框。
brush.seriesIndex:
指定哪些 series 可以被刷選,可取值為:
'all'
: 所有 series'Array'
: series index 列表'number'
: 某個 series index
brush.xAxisIndex:
指定哪些 xAxisIndex 可以被刷選。
可以設定
brush
是『全域性的』還是『屬於座標系的』。全域性 brush
在 echarts 例項中任意地方刷選。這是預設情況。如果沒有指定為『座標系 brush』,就是『全域性 brush』。
座標系 brush
在 指定的座標系中刷選。選框可以跟隨座標系的縮放和平移(roam 和 dataZoom)而移動。
座標系 brush 實際更為常用,尤其是在 geo 中。
這幾個配置項的取值可以是:
'all'
,表示所有number
,如0
,表示這個 index 所對應的座標系。Array
,如[0, 4, 2]
,表示指定這些 index 所對應的座標系。'none'
或null
或undefined
,表示不指定。
brush.yAxisIndex:
指定哪些 yAxisIndex 可以被刷選。
可以設定
brush
是『全域性的』還是『屬於座標系的』。全域性 brush
在 echarts 例項中任意地方刷選。這是預設情況。如果沒有指定為『座標系 brush』,就是『全域性 brush』。
座標系 brush
在 指定的座標系中刷選。選框可以跟隨座標系的縮放和平移(roam 和 dataZoom)而移動。
座標系 brush 實際更為常用,尤其是在 geo 中。
這幾個配置項的取值可以是:
'all'
,表示所有number
,如0
,表示這個 index 所對應的座標系。Array
,如[0, 4, 2]
,表示指定這些 index 所對應的座標系。'none'
或null
或undefined
,表示不指定。
brush.brushType:
預設的刷子型別。
'rect'
:矩形選框。'polygon'
:任意形狀選框。'lineX'
:橫向選擇。'lineY'
:縱向選擇。
brush.brushMode:
預設的刷子的模式。可取值為:
'single'
:單選。'multiple'
:多選。
brush.transformable:
已經選好的選框是否可以被調整形狀或平移。
brush.throttleType:
預設情況,刷選或者移動選區的時候,會不斷得發
brushSelected
事件,從而告訴外界選中的內容。throttleType 取值可以是:
'debounce'
:表示只有停止動作了(即一段時間沒有操作了),才會觸發事件。時間閾值由 brush.throttleDelay 指定。'fixRate'
:表示按照一定的頻率觸發時間,時間間隔由 brush.throttleDelay 指定。
brush.throttleDelay:
預設為
0
表示不開啟 throttle。預設情況,刷選或者移動選區的時候,會不斷得發
brushSelected
事件,從而告訴外界選中的內容。throttleType 取值可以是:
'debounce'
:表示只有停止動作了(即一段時間沒有操作了),才會觸發事件。時間閾值由 brush.throttleDelay 指定。'fixRate'
:表示按照一定的頻率觸發時間,時間間隔由 brush.throttleDelay 指定。
brush.removeOnClick:
在 brush.brushMode 為
'single'
的情況下,是否支援『單擊清除所有選框』。
brush.inBrush:
定義 在選中範圍中 的視覺元素。
可選的視覺元素有:
symbol
: 圖元的圖形類別。symbolSize
: 圖元的大小。color
: 圖元的顏色。colorAlpha
: 圖元的顏色的透明度。opacity
: 圖元以及其附屬物(如文字標籤)的透明度。colorLightness
: 顏色的明暗度,參見 HSL。colorSaturation
: 顏色的飽和度,參見 HSL。colorHue
: 顏色的色調,參見 HSL。大多數情況下,inBrush 可以不指定,維持本來的視覺配置。
brush.outOfBrush:
定義 在選中範圍外 的視覺元素。
可選的視覺元素有:
symbol
: 圖元的圖形類別。symbolSize
: 圖元的大小。color
: 圖元的顏色。colorAlpha
: 圖元的顏色的透明度。opacity
: 圖元以及其附屬物(如文字標籤)的透明度。colorLightness
: 顏色的明暗度,參見 HSL。colorSaturation
: 顏色的飽和度,參見 HSL。colorHue
: 顏色的色調,參見 HSL。注意,如果 outOfBrush 沒有指定,預設會設定 color:
'#ddd'
,如果你不想要這個color,比如可以 換成:brush: { ..., outOfBrush: { colorAlpha: 0.1 } }
brush.z:
brush 選框的 z-index。當有和不想管元件有不正確的重疊時,可以進行調整。
存在問題
由於brush.throttleType的判定標準只有時間 ,可能不適用於某些應用場景。