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

brush

ECharts 圖表的區(qū)域選擇組件 brush 可以用來選擇圖表中的某部分的數(shù)據(jù)，并將所選擇的數(shù)據(jù)展示給用戶，或者可以展示一些統(tǒng)計(jì)的計(jì)算結(jié)果，這樣的操作具有較大的方便性。

點(diǎn)擊編輯實(shí)例 》》

brush 的類型和啟動按鈕

目前 brush 組件支持的圖表類型：scatter、bar、candlestick（parallel 本身自帶刷選功能，但并非由 brush 組件來提供）。

點(diǎn)擊 toolbox 中的按鈕，能夠進(jìn)行『區(qū)域選擇』、『清除選擇』等操作。

以下是一個橫向 brush 示例（點(diǎn)擊 toolbox 中的按鈕啟動刷選）：

點(diǎn)擊編輯實(shí)例 》》

bar 圖中的 brush（點(diǎn)擊 toolbox 中的按鈕啟動刷選）：

點(diǎn)擊編輯實(shí)例 》》

啟動 brush 的按鈕既可以在 toolbox 中指定（參見 toolbox.feature.brush.type），也可以在 brush 組件的配置中指定（參見 brush.toolbox）。

brush 的按鈕支持的選框有：矩形 brush，任意形狀 brush，橫向 brush，縱向 brush。參見 brush.toolbox。

您可以使用“保持選擇”按鈕，切換到單選和多選模式。

• 單選即同時只能存在一個選框，可單擊空白區(qū)域消除選框。
• 多選即同時可存在多個選框，單擊空白區(qū)域不能消除選框，需要點(diǎn)擊『清除按鈕』消除線框。

brush 和坐標(biāo)系的關(guān)系

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

1、全局 brush：

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

2、坐標(biāo)系 brush：

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

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

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

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

• 'all'，表示所有
• number，如 0，表示這個 index 所對應(yīng)的坐標(biāo)系。
• Array，如 [0, 4, 2]，表示指定這些 index 所對應(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)系中刷選。
        ...
    }
};

使用 API 控制選框

可以通過調(diào)用 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]]
        }
    ]
});

詳情參見 action.brush

brushLink

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

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

點(diǎn)擊編輯實(shí)例 》》

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

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

注意:brushLink 是通過 dataIndex 進(jìn)行映射，所以需要保證，聯(lián)動的每個系列的 data 都是 index 對應(yīng)的。

例如：

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

參見 brush.brushLink。

throttle / debounce / 事件延遲

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

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

throttleType 取值可以是：

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

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

被選中項(xiàng)和未被選中項(xiàng)的視覺設(shè)置

參見 brush.inBrush 和 brush.outOfBrush。