PHP前端开发

ECharts 图表点击时,如何获取 X 轴数值?

百变鹏仔 3周前 (11-26) #echarts
文章标签 图表

如何捕捉 echarts 中图表点击时的 x 轴值?

问题背景:

在 echarts 中,您希望在单击或双击图表时复制 x 轴上的值。具体来说,需要在鼠标点击红色位置(左图所示)时将左侧的“281.11”数值复制到剪贴板。

解决方案:

要实现此功能,可以使用 echarts 的 getzr() 方法监听绘图区域的点击事件。以下是如何实现的:

myChart.getZr().on('click', e => {  const [x, y] = myChart.convertFromPixel('grid', [e.offsetX, e.offsetY]);});

细节说明:

通过获取 [x, y] 坐标,您可以访问与点击位置相对应的 x 轴值,并将其复制到剪贴板。