如何在ECharts中实现非同步时间序列的全系列Tooltip展示

你遇到的这个情况很常见——ECharts默认的axis触发模式下，Tooltip只会展示同一时间点有数据的系列，当各系列采样时间不统一时，自然就会出现只有单个系列显示的情况。要让Tooltip始终展示所有系列的数据，我们可以通过自定义Tooltip的formatter函数来实现，手动获取每个系列中离当前鼠标位置最近的数据点并渲染出来。

具体实现方案 #

1. 核心思路 #

保持Tooltip的trigger为axis，同时编写自定义的formatter函数：

• 获取当前鼠标指向的时间戳
• 遍历所有系列，找到每个系列中与该时间最接近的数据点
• 将所有系列的最近数据点拼接成Tooltip内容

2. 完整修改后的代码 #

var myChart = echarts.init(document.getElementById('main'));
var series = [{
    "name": "sensor 1",
    "data": [{
        "value": [ "2019-02-20T11:47:44.000Z", 22.2 ]
    }, {
        "value": [ "2019-02-20T12:03:02.000Z", 22.1 ]
    }, {
        "value": [ "2019-02-20T12:18:19.000Z", 22.15 ]
    }, {
        "value": [ "2019-02-20T12:33:36.000Z", 22.2 ]
    }, {
        "value": [ "2019-02-20T12:48:53.000Z", 22.15 ]
    }],
    "type": "line"
}, {
    "name": "sensor 2",
    "data": [{
        "value": [ "2019-02-20T11:47:44.000Z", 23.2 ]
    }, {
        "value": [ "2019-02-20T12:03:02.000Z", 23.1 ]
    }, {
        "value": [ "2019-02-20T12:22:19.000Z", 24.15 ]
    }, {
        "value": [ "2019-02-20T12:39:36.000Z", 21.2 ]
    }, {
        "value": [ "2019-02-20T12:52:53.000Z", 20.15 ]
    }],
    "type": "line"
}];

// 辅助函数：找到指定系列中离目标时间最近的数据点
function findNearestPoint(targetTime, seriesData) {
    let nearestPoint = null;
    let minDiff = Infinity;
    seriesData.forEach(point => {
        const pointTime = new Date(point.value[0]).getTime();
        const diff = Math.abs(pointTime - targetTime);
        if (diff < minDiff) {
            minDiff = diff;
            nearestPoint = point;
        }
    });
    return nearestPoint;
}

var option = {
    legend: {},
    tooltip: {
        trigger: 'axis',
        // 自定义Tooltip内容
        formatter: function(params) {
            // 获取当前鼠标指向的时间戳
            const currentTime = new Date(params[0].axisValue).getTime();
            let tooltipContent = `<div>${params[0].axisValue}</div>`;
            
            // 遍历所有系列，拼接每个系列的最近数据点
            series.forEach(s => {
                const nearestPoint = findNearestPoint(currentTime, s.data);
                if (nearestPoint) {
                    tooltipContent += `<div style="margin-top:4px;">
                        <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${s.color};margin-right:6px;"></span>
                        ${s.name}: ${nearestPoint.value[1]}
                    </div>`;
                }
            });
            return tooltipContent;
        }
    },
    axisPointer: {
        type: 'cross' // 显示十字准星，更直观对应时间轴位置
    },
    xAxis: {
        type: 'time'
    },
    yAxis: {
        scale: true
    },
    series: series,
};
myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script>
<div id="main" style="width: 500px;height:400px;"></div>

效果说明 #

• 现在无论鼠标指向哪个位置，Tooltip都会展示所有传感器的最近采样数据，不再局限于同一时间点的数据
• 新增的axisPointer: {type: 'cross'}会显示十字线，帮助你更清晰地对应时间轴位置
• Tooltip的样式可以通过HTML和CSS自由调整，比如代码中添加的系列颜色小圆点，让展示更直观

内容的提问来源于stack exchange，提问作者Kim