echarts区域选择(brush)

echarts区域选择(brush)

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

​ 目前 brush 组件支持的图表类型：scatter、bar、candlestick（parallel 本身自带刷选功能，但并非由 brush 组件来提供）。

​ 启动 brush 的按钮既可以在 toolbox 中指定（参见 toolbox.feature.brush.type），也可以在 brush 组件的配置中指定（参见 brush.toolbox）。

option 配置：

option = {
    ...
    brush: {
        toolbox:["lineX", "clear"],
        xAxisIndex: 0
     },
};复制

API

通过调用 dispatchAction 来用程序主动渲染选框

// echarts区域选择(brush)默认开启选择
this.myChart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'brush',
    brushOption: {
        brushType: 'lineX'   // 指定选框类型
    }
});复制

Event事件

//圈选结束后的回调
this.myChart.on('brushEnd',  (params) =>{
    // console.log(params);
    if (params.areas.length != 0) {
        // console.log(params.areas[0].coordRange)
        let start = params.areas[0].coordRange[0]
        let end = params.areas[0].coordRange[1]
        // console.log(option.xAxis.data)
        let startTime = option.xAxis.data[start]
        console.log("startTime:", startTime)
        let endTime = option.xAxis.data[end]
        console.log("endTime:", endTime)
    };
});复制