ECharts區(qū)域選擇組件（brush）的屬性

brush.toolbox   |   Array

[ default: ['rect', 'polygon', 'keep', 'clear'] ]

使用在 toolbox 中的 brush 按鈕。

brush 相關的 toolbox 按鈕有：

• 'rect'：開啟矩形選框選擇功能。
• 'polygon'：開啟任意形狀選框選擇功能。
• 'lineX'：開啟橫向選擇功能。
• 'lineY'：開啟縱向選擇功能。
• 'keep'：切換『單選』和『多選』模式。后者可支持同時畫多個選框。前者支持單擊清除所有選框。
• 'clear'：清空所有選框。

brush.brushLink   |   Array, string

[ default: null ]

不同系列間，選中的項可以聯(lián)動。

參見如下效果（刷選一個 scatter，其他 scatter 以及 parallel 圖都會有選中效果）：

brushLink 配置項是一個數(shù)組，內(nèi)容是 seriesIndex，指定了哪些 series 可以被聯(lián)動。例如可以是：

• [3, 4, 5] 表示 seriesIndex 為 3, 4, 5 的 series 可以被聯(lián)動。
• 'all' 表示所有 series 都進行 brushLink。
• 'none' 或 null 或 undefined 表示不啟用 brushLink 功能。

注意

brushLink 是通過 dataIndex 進行映射，所以需要保證，聯(lián)動的每個系列的 data 都是 index 對應的。*

例如：

option = {
    brush: {
        brushLink: [0, 1]
    },
    series: [
        {
            type: 'bar'
            data: [232,    4434,    545,      654]     // data 有四個項
        },
        {
            type: 'parallel',
            data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data 同樣有四個項，兩個系列的 data 是對應的。
        }
    ]
};

brush.seriesIndex   |   Array, number, string

[ default: 'all' ]

指定哪些 series 可以被刷選，可取值為：

• 'all': 所有 series
• 'Array': series index 列表
• 'number': 某個 series index

brush.geoIndex   |   Array, number, string

[ default: null ]

指定哪些 geo 可以被刷選。

可以設置 brush 是『全局的』還是『屬于坐標系的』。

全局 brush

在 echarts 實例中任意地方刷選。這是默認情況。如果沒有指定為『坐標系 brush』，就是『全局 brush』。

坐標系 brush

在 指定的坐標系中刷選。選框可以跟隨坐標系的縮放和平移（roam 和 dataZoom）而移動。

坐標系 brush 實際更為常用，尤其是在 geo 中。

通過指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 來規(guī)定可以在哪些坐標系中進行刷選。

這幾個配置項的取值可以是：

• '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 所在的直角坐標系中刷選。
        ...
    }
};

brush.xAxisIndex   |   Array, number, string

[ default: null ]

指定哪些 xAxisIndex 可以被刷選。

可以設置 brush 是『全局的』還是『屬于坐標系的』。

1、全局 brush

在 echarts 實例中任意地方刷選。這是默認情況。如果沒有指定為『坐標系 brush』，就是『全局 brush』。

2、坐標系 brush

在 指定的坐標系中刷選。選框可以跟隨坐標系的縮放和平移（roam 和 dataZoom）而移動。

坐標系 brush 實際更為常用，尤其是在 geo 中。

通過指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 來規(guī)定可以在哪些坐標系中進行刷選。

這幾個配置項的取值可以是：

• '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 所在的直角坐標系中刷選。
        ...
    }
};

brush.yAxisIndex   |   Array, number, string

[ default: null ]

指定哪些 yAxisIndex 可以被刷選。

可以設置 brush 是『全局的』還是『屬于坐標系的』。

1、全局 brush

在 echarts 實例中任意地方刷選。這是默認情況。如果沒有指定為『坐標系 brush』，就是『全局 brush』。

2、坐標系 brush

在 指定的坐標系中刷選。選框可以跟隨坐標系的縮放和平移（roam 和 dataZoom）而移動。

坐標系 brush 實際更為常用，尤其是在 geo 中。

通過指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 來規(guī)定可以在哪些坐標系中進行刷選。

這幾個配置項的取值可以是：

• '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 所在的直角坐標系中刷選。
        ...
    }
};

brush.brushType   |   string

[ default: 'rect' ]

默認的刷子類型。

• 'rect'：矩形選框。
• 'polygon'：任意形狀選框。
• 'lineX'：橫向選擇。
• 'lineY'：縱向選擇。

brush.brushMode   |   string

[ default: 'single' ]

默認的刷子的模式?？扇≈禐椋?/p>

• 'single'：單選。
• 'multiple'：多選。

brush.transformable   |   boolean

[ default: true ]

已經(jīng)選好的選框是否可以被調(diào)整形狀或平移。

brush.brushStyle   |   Object

選框的默認樣式，值為：

{
    borderWidth: 1,
    color: 'rgba(120,140,180,0.3)',
    borderColor: 'rgba(120,140,180,0.8)'
},

brush.throttleType   |   string

[ default: 'fixRate' ]

默認情況，刷選或者移動選區(qū)的時候，會不斷得發(fā) brushSelected 事件，從而告訴外界選中的內(nèi)容。

但是頻繁的事件可能導致性能問題，或者動畫效果很差。所以 brush 組件提供了 brush.throttleType，brush.throttleDelay 來解決這個問題。

throttleType 取值可以是：

• 'debounce'：表示只有停止動作了（即一段時間沒有操作了），才會觸發(fā)事件。時間閾值由 brush.throttleDelay 指定。
• 'fixRate'：表示按照一定的頻率觸發(fā)時間，時間間隔由 brush.throttleDelay 指定。

例如這個 例子，就是使用了 debounce的效果：只有用戶停止動作了，柱狀圖才更新。不然的話，如果柱狀圖的頻繁更新，那么動畫效果很差。

brush.throttleDelay   |   number

[ default: 0 ]

默認為 0 表示不開啟 throttle。

默認情況，刷選或者移動選區(qū)的時候，會不斷得發(fā) brushSelected 事件，從而告訴外界選中的內(nèi)容。

但是頻繁的事件可能導致性能問題，或者動畫效果很差。所以 brush 組件提供了 brush.throttleType，brush.throttleDelay 來解決這個問題。

throttleType 取值可以是：

• 'debounce'：表示只有停止動作了（即一段時間沒有操作了），才會觸發(fā)事件。時間閾值由 brush.throttleDelay 指定。
• 'fixRate'：表示按照一定的頻率觸發(fā)時間，時間間隔由 brush.throttleDelay 指定。

例如這個 例子，就是使用了 debounce的效果：只有用戶停止動作了，柱狀圖才更新。不然的話，如果柱狀圖的頻繁更新，那么動畫效果很差。

brush.removeOnClick   |   number

[ default: true ]

在 brush.brushMode 為 'single' 的情況下，是否支持『單擊清除所有選框』。

brush.inBrush   |   Object

定義在選中范圍中的視覺元素。

可選的視覺元素有：

• symbol: 圖元的圖形類別。
• symbolSize: 圖元的大小。
• color: 圖元的顏色。
• colorAlpha: 圖元的顏色的透明度。
• opacity: 圖元以及其附屬物（如文字標簽）的透明度。
• colorLightness: 顏色的明暗度，參見 HSL。
• colorSaturation: 顏色的飽和度，參見 HSL。
• colorHue: 顏色的色調(diào)，參見 HSL。

大多數(shù)情況下，inBrush 可以不指定，維持本來的視覺配置。

brush.outOfBrush   |   Object

定義在選中范圍外的視覺元素。

可選的視覺元素有：

• symbol: 圖元的圖形類別。
• symbolSize: 圖元的大小。
• color: 圖元的顏色。
• colorAlpha: 圖元的顏色的透明度。
• opacity: 圖元以及其附屬物（如文字標簽）的透明度。
• colorLightness: 顏色的明暗度，參見 HSL。
• colorSaturation: 顏色的飽和度，參見 HSL。
• colorHue: 顏色的色調(diào)，參見 HSL。

注意，如果 outOfBrush 沒有指定，默認會設置 color: '#ddd'，如果你不想要這個 color，比如可以換成：

brush: {
    ...,
    outOfBrush: {
        colorAlpha: 0.1
    }
}

brush.z   |   number

[ default: 10000 ]

brush 選框的 z-index。當有和不想管組件有不正確的重疊時，可以進行調(diào)整。