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

brush.toolbox   |   Array

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

使用在 toolbox 中的 brush 按鈕。

brush 相關(guān)的 toolbox 按鈕有：

• 'rect'：開(kāi)啟矩形選框選擇功能。
• 'polygon'：開(kāi)啟任意形狀選框選擇功能。
• 'lineX'：開(kāi)啟橫向選擇功能。
• 'lineY'：開(kāi)啟縱向選擇功能。
• 'keep'：切換『?jiǎn)芜x』和『多選』模式。后者可支持同時(shí)畫多個(gè)選框。前者支持單擊清除所有選框。
• 'clear'：清空所有選框。

brush.brushLink   |   Array, string

[ default: null ]

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

參見(jiàn)如下效果（刷選一個(gè) scatter，其他 scatter 以及 parallel 圖都會(huì)有選中效果）：

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

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

注意

brushLink 是通過(guò) dataIndex 進(jìn)行映射，所以需要保證，聯(lián)動(dòng)的每個(gè)系列的 data 都是 index 對(duì)應(yīng)的。*

例如：

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

brush.seriesIndex   |   Array, number, string

[ default: 'all' ]

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

• 'all': 所有 series
• 'Array': series index 列表
• 'number': 某個(gè) series index

brush.geoIndex   |   Array, number, string

[ default: null ]

指定哪些 geo 可以被刷選。

可以設(shè)置 brush 是『全局的』還是『屬于坐標(biāo)系的』。

全局 brush

在 echarts 實(shí)例中任意地方刷選。這是默認(rèn)情況。如果沒(méi)有指定為『坐標(biāo)系 brush』，就是『全局 brush』。

坐標(biāo)系 brush

在 指定的坐標(biāo)系中刷選。選框可以跟隨坐標(biāo)系的縮放和平移（roam 和 dataZoom）而移動(dòng)。

坐標(biāo)系 brush 實(shí)際更為常用，尤其是在 geo 中。

通過(guò)指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 來(lái)規(guī)定可以在哪些坐標(biāo)系中進(jìn)行刷選。

這幾個(gè)配置項(xiàng)的取值可以是：

• 'all'，表示所有
• number，如 0，表示這個(gè) index 所對(duì)應(yīng)的坐標(biāo)系。
• Array，如 [0, 4, 2]，表示指定這些 index 所對(duì)應(yīng)的坐標(biāo)系。
• 'none' 或 null 或 undefined，表示不指定。

例如：

option = {
    geo: {
        ...
    },
    brush: {
        geoIndex: 'all', // 只可以在所有 geo 坐標(biāo)系中刷選，也就是上面定義的 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 所在的直角坐標(biāo)系中刷選。
        ...
    }
};

brush.xAxisIndex   |   Array, number, string

[ default: null ]

指定哪些 xAxisIndex 可以被刷選。

可以設(shè)置 brush 是『全局的』還是『屬于坐標(biāo)系的』。

1、全局 brush

在 echarts 實(shí)例中任意地方刷選。這是默認(rèn)情況。如果沒(méi)有指定為『坐標(biāo)系 brush』，就是『全局 brush』。

2、坐標(biāo)系 brush

在 指定的坐標(biāo)系中刷選。選框可以跟隨坐標(biāo)系的縮放和平移（roam 和 dataZoom）而移動(dòng)。

坐標(biāo)系 brush 實(shí)際更為常用，尤其是在 geo 中。

通過(guò)指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 來(lái)規(guī)定可以在哪些坐標(biāo)系中進(jìn)行刷選。

這幾個(gè)配置項(xiàng)的取值可以是：

• 'all'，表示所有
• number，如 0，表示這個(gè) index 所對(duì)應(yīng)的坐標(biāo)系。
• Array，如 [0, 4, 2]，表示指定這些 index 所對(duì)應(yīng)的坐標(biāo)系。
• 'none' 或 null 或 undefined，表示不指定。

例如：

option = {
    geo: {
        ...
    },
    brush: {
        geoIndex: 'all', // 只可以在所有 geo 坐標(biāo)系中刷選，也就是上面定義的 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 所在的直角坐標(biāo)系中刷選。
        ...
    }
};

brush.yAxisIndex   |   Array, number, string

[ default: null ]

指定哪些 yAxisIndex 可以被刷選。

可以設(shè)置 brush 是『全局的』還是『屬于坐標(biāo)系的』。

1、全局 brush

在 echarts 實(shí)例中任意地方刷選。這是默認(rèn)情況。如果沒(méi)有指定為『坐標(biāo)系 brush』，就是『全局 brush』。

2、坐標(biāo)系 brush

在 指定的坐標(biāo)系中刷選。選框可以跟隨坐標(biāo)系的縮放和平移（roam 和 dataZoom）而移動(dòng)。

坐標(biāo)系 brush 實(shí)際更為常用，尤其是在 geo 中。

通過(guò)指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 來(lái)規(guī)定可以在哪些坐標(biāo)系中進(jìn)行刷選。

這幾個(gè)配置項(xiàng)的取值可以是：

• 'all'，表示所有
• number，如 0，表示這個(gè) index 所對(duì)應(yīng)的坐標(biāo)系。
• Array，如 [0, 4, 2]，表示指定這些 index 所對(duì)應(yīng)的坐標(biāo)系。
• 'none' 或 null 或 undefined，表示不指定。

例如：

option = {
    geo: {
        ...
    },
    brush: {
        geoIndex: 'all', // 只可以在所有 geo 坐標(biāo)系中刷選，也就是上面定義的 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 所在的直角坐標(biāo)系中刷選。
        ...
    }
};

brush.brushType   |   string

[ default: 'rect' ]

默認(rèn)的刷子類型。

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

brush.brushMode   |   string

[ default: 'single' ]

默認(rèn)的刷子的模式?？扇≈禐椋?/p>

• 'single'：?jiǎn)芜x。
• 'multiple'：多選。

brush.transformable   |   boolean

[ default: true ]

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

brush.brushStyle   |   Object

選框的默認(rèn)樣式，值為：

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

brush.throttleType   |   string

[ default: 'fixRate' ]

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

但是頻繁的事件可能導(dǎo)致性能問(wèn)題，或者動(dòng)畫效果很差。所以 brush 組件提供了 brush.throttleType，brush.throttleDelay 來(lái)解決這個(gè)問(wèn)題。

throttleType 取值可以是：

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

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

brush.throttleDelay   |   number

[ default: 0 ]

默認(rèn)為 0 表示不開(kāi)啟 throttle。

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

但是頻繁的事件可能導(dǎo)致性能問(wèn)題，或者動(dòng)畫效果很差。所以 brush 組件提供了 brush.throttleType，brush.throttleDelay 來(lái)解決這個(gè)問(wèn)題。

throttleType 取值可以是：

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

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

brush.removeOnClick   |   number

[ default: true ]

在 brush.brushMode 為 'single' 的情況下，是否支持『?jiǎn)螕羟宄羞x框』。

brush.inBrush   |   Object

定義在選中范圍中的視覺(jué)元素。

可選的視覺(jué)元素有：

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

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

brush.outOfBrush   |   Object

定義在選中范圍外的視覺(jué)元素。

可選的視覺(jué)元素有：

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

注意，如果 outOfBrush 沒(méi)有指定，默認(rèn)會(huì)設(shè)置 color: '#ddd'，如果你不想要這個(gè) color，比如可以換成：

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

brush.z   |   number

[ default: 10000 ]

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