PHP前端开发

如何使用 ECharts 点击图表复制 X 轴值?

百变鹏仔 2个月前 (11-26) #echarts
文章标签 图表

echarts 点击图表复制 x 轴值

在 echarts 中,实现单、双击图表时复制 x 轴值需要借助其事件机制。要监听图表中的“空白处”,可以使用 getzr().on('click') 方法。接下来,通过 convertfrompixel('grid', [e.offsetx, e.offsety]) 方法将像素坐标转换为对应的数据坐标。

以下代码演示了如何实现此功能:

// 监听图表点击事件myChart.getZr().on('click', e => {  // 获取鼠标点击的坐标  const [x, y] = myChart.convertFromPixel('grid', [e.offsetX, e.offsetY]);    // 将 X 轴值复制到剪贴板  navigator.clipboard.writeText(x);});

需要注意的是,该代码依赖于浏览器的 navigator.clipboard api,某些浏览器可能不支持。