建站
咨詢
售后
建站咨詢
新聞中心
brush.toolbox | Array
[ default: ['rect', 'polygon', 'keep', 'clear'] ]
使用在 toolbox 中的 brush 按鈕。
brush 相關(guān)的 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 對應(yīng)的。*
例如：
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 是對應(yīng)的。
}
]
};brush.seriesIndex | Array, number, string
[ default: 'all' ]
指定哪些 series 可以被刷選，可取值為：
- 'all': 所有 series
- 'Array': series index 列表
- 'number': 某個 series index
brush.geoIndex | Array, number, string
[ default: null ]
指定哪些 geo 可以被刷選。
可以設(shè)置 brush 是『全局的』還是『屬于坐標(biāo)系的』。
全局 brush
在 echarts 實例中任意地方刷選。這是默認情況。如果沒有指定為『坐標(biāo)系 brush』，就是『全局 brush』。
坐標(biāo)系 brush
在 指定的坐標(biāo)系中刷選。選框可以跟隨坐標(biāo)系的縮放和平移（roam 和 dataZoom）而移動。
坐標(biāo)系 brush 實際更為常用，尤其是在 geo 中。
通過指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 來規(guī)定可以在哪些坐標(biāo)系中進行刷選。
這幾個配置項的取值可以是：
- '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)系中刷選。
...
}
};brush.xAxisIndex | Array, number, string
[ default: null ]
指定哪些 xAxisIndex 可以被刷選。
可以設(shè)置 brush 是『全局的』還是『屬于坐標(biāo)系的』。
1、全局 brush
在 echarts 實例中任意地方刷選。這是默認情況。如果沒有指定為『坐標(biāo)系 brush』，就是『全局 brush』。
2、坐標(biāo)系 brush
在 指定的坐標(biāo)系中刷選。選框可以跟隨坐標(biāo)系的縮放和平移（roam 和 dataZoom）而移動。
坐標(biāo)系 brush 實際更為常用，尤其是在 geo 中。
通過指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 來規(guī)定可以在哪些坐標(biāo)系中進行刷選。
這幾個配置項的取值可以是：
- '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)系中刷選。
...
}
};brush.yAxisIndex | Array, number, string
[ default: null ]
指定哪些 yAxisIndex 可以被刷選。
可以設(shè)置 brush 是『全局的』還是『屬于坐標(biāo)系的』。
1、全局 brush
在 echarts 實例中任意地方刷選。這是默認情況。如果沒有指定為『坐標(biāo)系 brush』，就是『全局 brush』。
2、坐標(biāo)系 brush
在 指定的坐標(biāo)系中刷選。選框可以跟隨坐標(biāo)系的縮放和平移（roam 和 dataZoom）而移動。
坐標(biāo)系 brush 實際更為常用，尤其是在 geo 中。
通過指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 來規(guī)定可以在哪些坐標(biāo)系中進行刷選。
這幾個配置項的取值可以是：
- '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)系中刷選。
...
}
};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)容。
但是頻繁的事件可能導(dǎo)致性能問題，或者動畫效果很差。所以 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)容。
但是頻繁的事件可能導(dǎo)致性能問題，或者動畫效果很差。所以 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: 圖元以及其附屬物（如文字標(biāo)簽）的透明度。
- colorLightness: 顏色的明暗度，參見 HSL。
- colorSaturation: 顏色的飽和度，參見 HSL。
- colorHue: 顏色的色調(diào)，參見 HSL。
大多數(shù)情況下，inBrush 可以不指定，維持本來的視覺配置。
brush.outOfBrush | Object
定義在選中范圍外的視覺元素。
可選的視覺元素有：
- symbol: 圖元的圖形類別。
- symbolSize: 圖元的大小。
- color: 圖元的顏色。
- colorAlpha: 圖元的顏色的透明度。
- opacity: 圖元以及其附屬物（如文字標(biāo)簽）的透明度。
- colorLightness: 顏色的明暗度，參見 HSL。
- colorSaturation: 顏色的飽和度，參見 HSL。
- colorHue: 顏色的色調(diào)，參見 HSL。
注意，如果 outOfBrush 沒有指定，默認會設(shè)置 color: '#ddd'，如果你不想要這個 color，比如可以換成：
brush: {
...,
outOfBrush: {
colorAlpha: 0.1
}
}brush.z | number
[ default: 10000 ]
brush 選框的 z-index。當(dāng)有和不想管組件有不正確的重疊時，可以進行調(diào)整。
網(wǎng)頁標(biāo)題：創(chuàng)新互聯(lián)ECharts教程：ECharts區(qū)域選擇組件（brush）的屬性
分享鏈接：http://m.5511xx.com/article/codjcgp.html
