canvas 实现瀑布图鼠标框选

在Vue中，结合Highcharts和Colormap实现频谱瀑布图时，你可以利用`onmousemove`事件监听用户的鼠标移动，以实现实时的鼠标框选功能。以下是一个简单的示例：

// 假设waterFallList是已经准备好的瀑布图数据

methods: {
  onWaterfallMouseMove(event) {
    const canvas = this.$refs.canvas; // 获取canvas元素
    const rect = canvas.getBoundingClientRect(); // 获取canvas的可视区域信息
    const x = event.clientX - rect.left; // 相对于视口的x坐标
    const y = event.clientY - rect.top; // 相对于视口的y坐标
    
    // 在瀑布图上找到对应像素点的索引，这里假设瀑布图是以行布局的
    const selectedIndex = Math.floor(y / this.waterFallHeight);
    
    // 根据selectedIndex从waterFallList中获取选中的数据
    const selectedData = this.waterFallList[selectedIndex];
    
    // 进行后续操作，如更新图表状态或触发回调
    console.log('Selected index:', selectedIndex, ', Data:', selectedData);
  }
},
mounted() {
  this.canvas.addEventListener('mousemove', this.onWaterfallMouseMove); // 绑定鼠标移动事件
}

要取消鼠标框选时，可以添加一个`onmouseup`事件并移除监听器：

methods: {
  onMouseUp() {
    this.canvas.removeEventListener('mousemove', this.onWaterfallMouseMove); // 移除鼠标移动事件
  },
  // ...
},
mounted() {
  // ...
  this.canvas.addEventListener('mouseup', this.onMouseUp);
}

注意，这个示例假设瀑布图的y轴表示行，x轴表示列，并且`waterFallHeight`代表每一行的高度。实际应用中可能需要调整逻辑以适应你的具体数据结构。