1. 程式人生 > >echarts配置項:brush

echarts配置項:brush

brush

brush 是區域選擇元件,使用者可以選擇圖中一部分資料,從而便於向用戶展示被選中資料,或者他們的一些統計計算結果。

目前 brush 元件支援的圖表型別:scatterbarcandlestickparallel 本身自帶刷選功能,但並非由 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的判定標準只有時間 ,可能不適用於某些應用場景。