Echarts 折线图一个点显示多个实时数据tooltip提示框

可以通过 Echarts 的 tooltip formatter 属性来实现一个点显示多个实时数据的 tooltip 提示框。具体操作步骤如下：

1. 在 Echarts 的 option 中定义一个数组，用于存储所有数据点的实时数据信息。

var data = [
    {name: '2019-01-01', value: [10, 20, 30]},
    {name: '2019-01-02', value: [15, 25, 35]},
    {name: '2019-01-03', value: [20, 30, 40]},
    ...
];

2. 在折线图的 series 中，将每个数据点的实时数据信息存储到 itemStyle.normal.label 属性中。

var series = [
    {
        name: '数据一',
        type: 'line',
        data: data.map(function(item) {
            return {
                name: item.name,
                value: item.value[0],
                label: {
                    normal: {
                        show: true,
                        formatter: function(params) {
                            return params.data.value[0];
                        }
                    }
                }
            };
        })
    },
    {
        name: '数据二',
        type: 'line',
        data: data.map(function(item) {
            return {
                name: item.name,
                value: item.value[1],
                label: {
                    normal: {
                        show: true,
                        formatter: function(params) {
                            return params.data.value[1];
                        }
                    }
                }
            };
        })
    },
    {
        name: '数据三',
        type: 'line',
        data: data.map(function(item) {
            return {
                name: item.name,
                value: item.value[2],
                label: {
                    normal: {
                        show: true,
                        formatter: function(params) {
                            return params.data.value[2];
                        }
                    }
                }
            };
        })
    }
];

3. 在折线图的 tooltip 中，使用 formatter 属性自定义 tooltip 显示的内容。

var option = {
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            var result = params[0].name + '<br/>';
            for (var i = 0; i < params.length; i++) {
                var item = params[i];
                var value = item.data.value;
                result += item.seriesName + ': ' + value.join(', ') + '<br/>';
            }
            return result;
        }
    },
    ...
};

这样，当鼠标悬浮在某个数据点上时，tooltip 提示框会显示该数据点对应的所有实时数据信息。