需求描述
接到需求在一个xAxis坐标轴为time类型，series的type类型为line的可视化图表上，用brush圈选出图表上的任何一段数据，然后根据不用数据做出不同的操作。本来以为很简单调一下方法，去翻文档的时候发现：
1、不支持line
2、不支持xAxis坐标轴为time时间轴（不用的轴的区别这里不多赘述）
难搞哦！
简单配置
首先先走官网下载一个例子
官网链接：echarts.apache.org/examples/zh…
启动brush也有两种方案：
1、通过toolbox指定按钮。（详情参加brush.toolbox）
brush: {
xAxisIndex: 'all',//指定哪些 series 可以被刷选
throttleType: "debounce", //开启选中延迟后调用回调延迟
throttleDelay: 600, //选中延迟后调用回调延迟时
brushStyle: {
borderWidth: 1,
color: 'rgba(120,140,180,0.3)',
borderColor: 'rgba(0,0,0,.65)'
}
},
toolbox: {
show: true, //可以设置不同的按钮
},
2、通过调用 dispatchAction 来用程序主动渲染选框
Chart是当前图表的实例。
根据需求我用的这一种方式。
Chart.dispatchAction({
type: 'takeGlobalCursor',
// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
key: 'brush',
brushOption: {
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
brushType: 'lineX',
// 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置
brushMode: 'single'
}
});
myChart.on('brushEnd', renderBrushed); //圈选结束后的回调
xAxis坐标轴为time类型和其他类型
1、xAxis坐标轴type为time（时间轴）返回的坐标系单位？
2、xAxis坐标轴type为category（类目轴）,根据返回的下标去option里得series查找数据
series的type类型为line类型和其他类型
1、bar类型使用brushselected方法返回dataIndex下标去查找数据
2、line类型，返回的是空。文档也有说明不支持line。
解决方案
思路：brush之后会返回圈选矩形的left和top，刷子的矩形范围可以取的到，那再去取每个点的坐标，然后判断每个点是否在这个矩形里面，这样就可以获取到圈选了哪些数据！但是并没有返回每个点的left和top，最后在图表的自身实例上找到了
废话少说，贴代码
function renderBrushed(params) {
if (params.areas.length != 0) {
let p = {}; // 矩形范围
p.left = params.areas[0].range[0];
p.right = params.areas[0].range[1];
let arr = myChart._chartsViews[0]._points.map(([left], i) => left >= p.left && left <= p.right ? i : -1).filter(i => i >= 0);
//获取不同维度的数据
console.log(arr.map(i => ([...option.series.map(s => s.data[i])])))
console.log(option.series.map(s => ([...arr.map(i => s.data[i])])))
};
}
两种维度的数据获取方式，完美解决！
结尾
写的不好或者其他解决方案的欢迎交流、指点！
战胜困难的最好办法就是面对困难，加油，奥利给！
