echarts 一个图例控制两条折线？

Question

背景：X轴是48个小时，Y轴是数值，红色图例是首次登录设备数，点击一个图例希望展示两条折线，分别是今日折线和昨日折线，当鼠标移到折线上点的时候，可以展示：
今日首登设备：xxx 昨日首登设备：xxx
目前两条折线使用以下方法实现的，但是文本还没显示出来，恳求各位大佬指教！先行谢过

问题是这样的，我使用一个图例显示了两条折线

代码：

var option = {
        title: {
            text: '趋势图',
            left: '3%',
            top: '3%',
            textStyle: {
                color: '#666666',
                fontSize: 14,
                fontWeight:'normal',
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            icon: 'roundRect',
            selectedMode: 'single',
            data: ['首登设备', '当日新增', '当日登录用户', '当日登录次数', '当日总付费', 'ARPU', 'ARPPU'],
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {show:false}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '首登设备',
                type: 'line',
                symbolSize: 8,
                data: [133, 1, 101, 1334, 920, 230, 210],

            },
            {
                name: '首登设备',
                type: 'line',
                symbolSize: 8,
                data: [34, 534, 101, 134, 90, 230, 160],

            },
            {
                name: '当日新增',
                type: 'line',
                data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
                name: '当日新增',
                type: 'line',
                data: [220, 3, 191, 234, 290, 330, 310],
            },
            {
                name: '当日登录用户',
                type: 'line',
                data: [150, 2, 201, 154, 190, 330, 410]
            },
            {
                name: '当日登录次数',
                type: 'line',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '当日总付费',
                type: 'line',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: 'ARPU',
                type: 'line',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: 'ARPPU',
                type: 'line',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

Answer 1

首先给 series 配置一个 id，用于区分 今日 和 昨日

series: [
    {
        id: 'today',
        name: '首登设备',
        type: 'line',
        symbolSize: 8,
        data: [133, 1, 101, 1334, 920, 230, 210],
    },
    {
        id: 'yesterday',
        name: '首登设备',
        type: 'line',
        symbolSize: 8,
        data: [34, 534, 101, 134, 90, 230, 160],
    }
]

然后给 tooltip 配置一个自定义的 formatter 函数来实现

tooltip: {
    trigger: 'axis',
    formatter(params) {
        const { name } = params[0]
        return params.reduce((domStr, item) => {
            const { marker, seriesId, seriesName, data } = item;
            const prefixMap = {
              today: '今日',
              yesterday: '昨日'
            }
            const prefix = prefixMap[seriesId] ?? ''
            domStr += `${marker} ${prefix}${seriesName}: ${data} <br/>`;
            return domStr;
        }, `${name}<br/>`)
    }
}