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)
};
});