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

作者站长头像
站长
· 阅读数 20

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

问题是这样的,我使用一个图例显示了两条折线echarts 一个图例控制两条折线?

代码:

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]
            }
        ]
    };
回复
1个回答
avatar
test
2024-07-17

首先给 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/>`)
    }
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容