echarts 一个图例控制两条折线?
背景: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]
}
]
};
回复
1个回答

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/>`)
}
}
回复

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