本文介绍在 ECharts 中为不规则时间序列（如稀疏、非对齐的时间戳数据）实现智能交叉提示的方法：当鼠标悬停于某条折线时，自动计算并显示所有其他系列在时间轴上最邻近时刻对应的数据点，从而解决多用户/多指标异步更新导致的 tooltip 信息缺失问题。
本文介绍在 echarts 中为不规则时间序列（如稀疏、非对齐的时间戳数据）实现智能交叉提示的方法：当鼠标悬停于某条折线时，自动计算并显示所有其他系列在**时间轴上最邻近时刻**对应的数据点，从而解决多用户/多指标异步更新导致的 tooltip 信息缺失问题。
在可视化用户行为或游戏性能等真实场景数据时，API 返回的时序数据往往具有「不规则性」：不同用户的统计快照时间戳不一致（如 2018-01-01T14:05:19Z、2018-04-19T10:39:30Z），且采样频率差异显著。若直接使用 ECharts 默认 tooltip，仅能显示当前悬停系列的精确点，而无法关联其他系列「同一时间附近」的状态——这正是用户截图中绿色曲线缺少对应时间标签的根本原因。
ECharts 原生不支持跨系列时间对齐 tooltip，但可通过自定义 tooltip.formatter 函数实现。核心思路是：以当前悬停点的 X 值（时间戳）为基准，在其他所有系列中搜索 X 坐标最接近该值的数据点，并渲染其完整信息。
以下是一个生产就绪的实现方案（适配时间序列，已增强鲁棒性）：
// 假设你的数据已转换为 [timestamp, value] 格式（毫秒时间戳更易计算）
const seriesData = [
// 用户 A 的 pp_raw 曲线（时间戳已转为毫秒）
{ name: 'acrawford69', data: [
[new Date('2018-01-01T14:05:19Z').getTime(), 376.591],
[new Date('2018-04-19T10:39:30Z').getTime(), 2119.61],
[new Date('2018-07-12T15:55:55Z').getTime(), 3174.39],
[new Date('2018-07-30T16:01:46Z').getTime(), 3403.8]
]},
// 用户 B 的 pp_raw 曲线
{ name: 'Vynxica', data: [
[new Date('2018-04-15T19:10:20Z').getTime(), 2391.06],
[new Date('2018-04-17T20:40:28Z').getTime(), 2429.73],
[new Date('2018-05-04T09:35:20Z').getTime(), 2578.79],
[new Date('2018-05-19T19:48:10Z').getTime(), 2751.09]
]}
];
// 配置项
const option = {
tooltip: {
trigger: 'axis',
formatter: (params) => {
// 获取当前悬停点的时间戳（X 值）
const hoverTime = params[0].value[0];
const formatTime = (ts) => new Date(ts).toLocaleDateString('en-US', {
year: 'numeric', month: 'short', day: 'numeric'
});
// 初始化结果字符串（含悬停点）
let html = `<div style="font-weight:bold">${params[0].seriesName}: ${params[0].value[1].toFixed(2)} PP<br>
(${formatTime(hoverTime)})</div>`;
// 遍历所有系列，查找每个系列中时间最邻近的点
params.forEach(p => {
const series = myChart.getOption().series[p.seriesIndex];
if (!series || series.data.length === 0) return;
// 寻找距离 hoverTime 最近的点（欧氏距离，仅比对时间轴）
let nearest = series.data[0];
let minDiff = Math.abs(series.data[0][0] - hoverTime);
for (let i = 1; i < series.data.length; i++) {
const diff = Math.abs(series.data[i][0] - hoverTime);
if (diff < minDiff) {
minDiff = diff;
nearest = series.data[i];
}
}
// 若非当前悬停系列，则追加到 tooltip
if (p.seriesIndex !== params[0].seriesIndex) {
html += `<div style="margin-top:4px;color:#${series.itemStyle?.color || '666'}">
${series.name}: ${nearest[1].toFixed(2)} PP<br>
(${formatTime(nearest[0])})
</div>`;
}
});
return html;
}
},
xAxis: {
type: 'time',
axisLabel: {
formatter: '{yyyy}-{MM}-{dd}'
}
},
yAxis: {
name: 'PP Score'
},
series: seriesData.map(s => ({
name: s.name,
data: s.data,
type: 'line',
smooth: true,
symbolSize: 6
}))
};✅ 关键注意事项：
- 时间戳标准化：务必统一将原始 ISO 字符串（如 "2018-04-19T10:39:30Z"）转换为毫秒级时间戳（Date.getTime()），避免字符串比较错误；
- 性能优化：若数据量极大（>10k 点），建议预构建每个系列的二分查找索引，或改用 Array.prototype.reduce 替代遍历；
- 空值与边界处理：示例中已隐含处理单点系列，实际应用需增加 if (series.data?.length) 判断；
- 视觉一致性：通过 itemStyle.color 动态匹配图例颜色，提升可读性；
- 替代方案：若需更高精度（如按时间差加权插值），可引入 d3-time 或 date-fns 库辅助计算。
此方法无需更换图表库，兼容 ECharts v4/v5，且完全保留原生交互体验（缩放、拖拽、图例开关等）。它将「不规则」转化为「可对齐」，让多源异步数据在可视化层真正实现语义协同。
