本文介绍如何通过点击ECharts图表区域，将对应的X轴数值复制到剪贴板。 我们将基于ECharts 5.5.0版本，实现点击图表后复制X轴值的便捷功能。例如，点击图表上一点，若其X轴值为“281.11”，则“281.11”将被复制到剪贴板。
现有代码缺少点击事件与复制操作的关联。 我们需要结合ECharts的事件监听机制和JavaScript的剪贴板API来实现此功能。
首先，监听图表的click事件。使用myChart.getZr().on('click', e => { ... })监听图表区域的点击。getZr()获取ECharts的zrender实例，e包含点击事件信息，包括鼠标坐标。
其次，将像素坐标转换为图表坐标。点击事件坐标为像素坐标，我们需要图表坐标来确定X轴值。使用myChart.convertFromPixel('grid', [e.offsetX, e.offsetY])进行转换，'grid'指定转换为图表网格坐标。结果为数组[x, y]，x为X轴坐标，y为Y轴坐标。
最后，根据X轴坐标获取对应的X轴数值。这取决于你的图表数据结构。假设X轴数据存储在option.xaxis.data中，你需要根据x值找到对应的数值。 由于示例中X轴使用类别型数据，x为索引值，需用此索引值从option.xaxis.data中获取数值。
完整代码示例如下：
myChart.getZr().on('click', e => {
const [x, y] = myChart.convertFromPixel('grid', [e.offsetX, e.offsetY]);
// 找到最近的 x 轴数据点索引
let closestIndex = -1;
let minDistance = Infinity;
for (let i = 0; i < option.xAxis.data.length; i++) {
const distance = Math.abs(x - i); // 类别型数据，x为索引
if (distance < minDistance) {
minDistance = distance;
closestIndex = i;
}
}
if (closestIndex !== -1) {
const xValue = option.xAxis.data[closestIndex];
navigator.clipboard.writeText(xValue)
.then(() => {
console.log('X轴数值已复制到剪贴板:', xValue);
})
.catch(err => {
console.error('复制失败:', err);
});
}
});
这段代码监听点击事件，将像素坐标转换为图表坐标，找到最近的X轴数据点，获取其值，并使用navigator.clipboard.writeText()复制到剪贴板。 注意navigator.clipboard API的浏览器兼容性。
如果你的X轴数据为数值型而非类别型，获取数值的方法需要相应调整，根据你的数据结构进行修改。
