https://blog.csdn.net/weixin_42854769/article/details/125060239
一、Bug
Echarts 官方提供的数据框选功能中,针对散点图可以添加 brushselected 事件来获取被框选的点的索引值,但是当使用 large 参数来开启大数据量优化后,再进行框选时存储选中点索引集合的字段 dataIndex 返回的是空数组。
截止 5.3 版本该 bug 仍未解决,因此需要自行对散点图框选进行处理。
二、处理逻辑
所使用到的框选分为两种,矩形框选和不规则框选。
矩形框选较好实现,只需要获取框选的四个顶点的坐标然后找出在此范围内的点即可。
不规则框选则需要使用引射线法来对每个点进行判断,由于数据量比较大,如果遍历整个图表的所有点进行判断性能不是很优,因此可以找出不规则框选的极限横纵坐标,将其假想为矩形,优先筛选出矩形内的点,然后再用筛选后的点进一步按照引射线法进行判断。
三、效果展示
3.1 矩形框选
因为同一图表中有蓝绿两组数据,因此打印出来的是两组索引值,根据索引值就可以找出具体被框选的点。
————————————————
版权声明:本文为CSDN博主「仿生人会梦到敲代码么」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42854769/article/details/125060239
// data 为数据集合格式如下
// [{ typeA: [[x0,y0], [x1,y1]...], typeB: [[x0,y0], [x1,y1]...] }]
chart.on('brushend', (params: any) => {
let keys = Object.keys(data[0]);
for (let i = 0; i < keys.length; i++) {
console.log(onBrushend(params, data[0][keys[i]]));
}
});
/**
* chart 自带的 brushend 事件调用该函数
* @param params
* @param data 点数据集合
* @returns 被选中的点索引值
*/
export const onBrushend = (params: any, data: number[][]) => {
// 单击图表也会触发 brushend 事件,判断是否有 area
if (!params.areas[0]) return;
// 选中的点的索引集合
let selectedList = [];
/**
* areas 中包含 range 和 coordRange
* range:全局坐标系,以整个 canvas 区域来计算的,无法使用
* coordRange:平面坐标系,以图表的横纵坐标进行计算,使用该参数,需要配置 brush 工具为平面坐标系
* 格式为 [[x0,y0],[x1,y1]......]
*/
let range = params.areas[0]?.coordRange;