echarts配置项:brush

brush


brush 是区域选择组件,用户可以选择图中一部分数据,从而便于向用户展示被选中数据,或者他们的一些统计计算结果。

目前 brush 组件支持的图表类型:scatterbarcandlestickparallel 本身自带刷选功能,但并非由 brush 组件来提供)。

启动 brush 的按钮既可以在 toolbox 中指定(参见 toolbox.feature.brush.type),也可以在 brush 组件的配置中指定(参见 brush.toolbox)。

支持这几种选框:矩形刷子任意形状刷子横向刷子纵向刷子。参见 brush.toolbox

可以使用 保持选择 按钮,切换单选和多选模式。

  • 单选即同时只能存在一个选框,可单击空白区域消除选框。
  • 多选即同时可存在多个选框,单击空白区域不能消除选框,需要点击『清除按钮』消除线框

刷选和坐标系的关系

可以设置 brush 是『全局的』还是『属于坐标系的』。

全局 brush

在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。

坐标系 brush

在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。

坐标系 brush 实际更为常用,尤其是在 geo 中。

通过指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。

这几个配置项的取值可以是:

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

使用 API 控制选框

可以通过调用 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]]
        }
    ]
});

 详细配置

brush.toolbox:

使用在 toolbox 中的按钮。

brush 相关的 toolbox 按钮有:

  • 'rect':开启矩形选框选择功能。
  • 'polygon':开启任意形状选框选择功能。
  • 'lineX':开启横向选择功能。
  • 'lineY':开启纵向选择功能。
  • 'keep':切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。
  • 'clear':清空所有选框。 

brush.seriesIndex:

指定哪些 series 可以被刷选,可取值为:

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

brush.xAxisIndex:

指定哪些 xAxisIndex 可以被刷选。

可以设置 brush 是『全局的』还是『属于坐标系的』。

全局 brush

在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。

坐标系 brush

在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。

坐标系 brush 实际更为常用,尤其是在 geo 中。

通过指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。

这几个配置项的取值可以是:

  • 'all',表示所有
  • number,如 0,表示这个 index 所对应的坐标系。
  • Array,如 [0, 4, 2],表示指定这些 index 所对应的坐标系。
  • 'none' 或 null 或 undefined,表示不指定。

brush.yAxisIndex:

指定哪些 yAxisIndex 可以被刷选。

可以设置 brush 是『全局的』还是『属于坐标系的』。

全局 brush

在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。

坐标系 brush

在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。

坐标系 brush 实际更为常用,尤其是在 geo 中。

通过指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。

这几个配置项的取值可以是:

  • 'all',表示所有
  • number,如 0,表示这个 index 所对应的坐标系。
  • Array,如 [0, 4, 2],表示指定这些 index 所对应的坐标系。
  • 'none' 或 null 或 undefined,表示不指定。

brush.brushType:

默认的刷子类型。

  • 'rect':矩形选框。
  • 'polygon':任意形状选框。
  • 'lineX':横向选择。
  • 'lineY':纵向选择。

brush.brushMode:

默认的刷子的模式。可取值为:

  • 'single':单选。
  • 'multiple':多选。

brush.transformable:

已经选好的选框是否可以被调整形状或平移。

brush.throttleType:

默认情况,刷选或者移动选区的时候,会不断得发 brushSelected 事件,从而告诉外界选中的内容。

但是频繁的事件可能导致性能问题,或者动画效果很差。所以 brush 组件提供了 brush.throttleTypebrush.throttleDelay 来解决这个问题。

throttleType 取值可以是:

  • 'debounce':表示只有停止动作了(即一段时间没有操作了),才会触发事件。时间阈值由 brush.throttleDelay 指定。
  • 'fixRate':表示按照一定的频率触发时间,时间间隔由 brush.throttleDelay 指定。

brush.throttleDelay:

默认为 0 表示不开启 throttle。

默认情况,刷选或者移动选区的时候,会不断得发 brushSelected 事件,从而告诉外界选中的内容。

但是频繁的事件可能导致性能问题,或者动画效果很差。所以 brush 组件提供了 brush.throttleTypebrush.throttleDelay 来解决这个问题。

throttleType 取值可以是:

  • 'debounce':表示只有停止动作了(即一段时间没有操作了),才会触发事件。时间阈值由 brush.throttleDelay 指定。
  • 'fixRate':表示按照一定的频率触发时间,时间间隔由 brush.throttleDelay 指定。

brush.removeOnClick:

在 brush.brushMode 为 'single' 的情况下,是否支持『单击清除所有选框』。

brush.inBrush:

定义 在选中范围中 的视觉元素。

可选的视觉元素有:

  • symbol: 图元的图形类别。
  • symbolSize: 图元的大小。
  • color: 图元的颜色。
  • colorAlpha: 图元的颜色的透明度。
  • opacity: 图元以及其附属物(如文字标签)的透明度。
  • colorLightness: 颜色的明暗度,参见 HSL
  • colorSaturation: 颜色的饱和度,参见 HSL
  • colorHue: 颜色的色调,参见 HSL

大多数情况下,inBrush 可以不指定,维持本来的视觉配置。

brush.outOfBrush:

定义 在选中范围外 的视觉元素。

可选的视觉元素有:

  • symbol: 图元的图形类别。
  • symbolSize: 图元的大小。
  • color: 图元的颜色。
  • colorAlpha: 图元的颜色的透明度。
  • opacity: 图元以及其附属物(如文字标签)的透明度。
  • colorLightness: 颜色的明暗度,参见 HSL
  • colorSaturation: 颜色的饱和度,参见 HSL
  • colorHue: 颜色的色调,参见 HSL

注意,如果 outOfBrush 没有指定,默认会设置 color: '#ddd',如果你不想要这个color,比如可以 换成:

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

brush.z:

brush 选框的 z-index。当有和不想管组件有不正确的重叠时,可以进行调整。

存在问题

由于brush.throttleType的判定标准只有时间 ,可能不适用于某些应用场景。

猜你喜欢

转载自blog.csdn.net/weixin_42247626/article/details/84487733