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

brush

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

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

brush 的類型和啟動(dòng)按鈕

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

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

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

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

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

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

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

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

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

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

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

可以設(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)系中刷選。
        ...
    }
};

使用 API 控制選框

可以通過(guò)調(diào)用 dispatchAction 來(lái)用程序主動(dòng)渲染選框，例如：

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)動(dòng)。

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

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

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.brushLink。

throttle / debounce / 事件延遲

默認(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)畫效果很差。

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

參見 brush.inBrush 和 brush.outOfBrush。