学习笔记-echarts框选计算

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;