多图联动如何分别展示tooltip框echarts 折线配置项内容和展示
如何在联动的多图中分别展示tooltip框
配置项如下
const data = [{
name: 'cpu使用率',
lineData: [{
name: 'line1',
value: [{
time: "23:00",
value: 10
}, {
time: "22:00",
value: 22
}, {
time: "21:00",
value: 23
}, {
time: "20:00",
value: 24
}, {
time: "19:00",
value: 29
}, {
time: "18:00",
value: 14
}, {
time: "17:00",
value: 20
}, {
time: "16:00",
value: 22
}, {
time: "15:00",
value: 26
}, {
time: "14:00",
value: 30
}, {
time: "13:00",
value: 15
}, {
time: "12:00",
value: 40
}, {
time: "11:00",
value: 10
}, {
time: "10:00",
value: 22
}, {
time: "09:00",
value: 23
}, {
time: "08:00",
value: 24
}, {
time: "07:00",
value: 29
}, {
time: "06:00",
value: 50
}, {
time: "05:00",
value: 12
}, {
time: "04:00",
value: 22
}, {
time: "03:00",
value: 26
}, {
time: "02:00",
value: 3
}, {
time: "01:00",
value: 15
}, {
time: "00:00",
value: 20
}]
}, {
name: 'line2',
value: [{
time: "23:00",
value: 20
}, {
time: "22:00",
value: 2
}, {
time: "21:00",
value: 14
}, {
time: "20:00",
value: 5
}, {
time: "19:00",
value: 32
}, {
time: "18:00",
value: 64
}, {
time: "17:00",
value: 20
}, {
time: "16:00",
value: 21
}, {
time: "15:00",
value: 60
}, {
time: "14:00",
value: 30
}, {
time: "13:00",
value: 15
}, {
time: "12:00",
value: 3
}, {
time: "11:00",
value: 10
}, {
time: "10:00",
value: 22
}, {
time: "09:00",
value: 23
}, {
time: "08:00",
value: 24
}, {
time: "07:00",
value: 29
}, {
time: "06:00",
value: 10
}, {
time: "05:00",
value: 20
}, {
time: "04:00",
value: 22
}, {
time: "03:00",
value: 26
}, {
time: "02:00",
value: 34
}, {
time: "01:00",
value: 15
}, {
time: "00:00",
value: 2
}]
}],
}, {
name: '内存使用率',
lineData: [{
name: 'line',
value: [{
time: "23:00",
value: 20
}, {
time: "22:00",
value: 15
}, {
time: "21:00",
value: 23
}, {
time: "20:00",
value: 24
}, {
time: "19:00",
value: 29
}, {
time: "18:00",
value: 20
}, {
time: "17:00",
value: 10
}, {
time: "16:00",
value: 24
}, {
time: "15:00",
value: 23
}, {
time: "14:00",
value: 24
}, {
time: "13:00",
value: 29
}, {
time: "12:00",
value: 14
}, {
time: "11:00",
value: 10
}, {
time: "10:00",
value: 22
}, {
time: "09:00",
value: 23
}, {
time: "08:00",
value: 24
}, {
time: "07:00",
value: 29
}, {
time: "06:00",
value: 14
}, {
time: "05:00",
value: 20
}, {
time: "04:00",
value: 22
}, {
time: "03:00",
value: 26
}, {
time: "02:00",
value: 30
}, {
time: "01:00",
value: 15
}, {
time: "00:00",
value: 3
}]
}, {
name: 'line1',
value: [{
time: "23:00",
value: 5
}, {
time: "22:00",
value: 5
}, {
time: "21:00",
value: 5
}, {
time: "20:00",
value: 5
}, {
time: "19:00",
value: 5
}, {
time: "18:00",
value: 6
}, {
time: "17:00",
value: 6
}, {
time: "16:00",
value: 10
}, {
time: "15:00",
value: 12
}, {
time: "14:00",
value: 6
}, {
time: "13:00",
value: 8
}, {
time: "12:00",
value: 10
}, {
time: "11:00",
value: 12
}, {
time: "10:00",
value: 2
}, {
time: "09:00",
value: 4
}, {
time: "08:00",
value: 7
}, {
time: "07:00",
value: 9
}, {
time: "06:00",
value: 2
}, {
time: "05:00",
value: 10
}, {
time: "04:00",
value: 3
}, {
time: "03:00",
value: 5
}, {
time: "02:00",
value: 15
}, {
time: "01:00",
value: 15
}, {
time: "00:00",
value: 4
}]
}],
}, {
name: 'Load',
lineData: [{
name: 'line1',
value: [{
time: "23:00",
value: 20
}, {
time: "22:00",
value: 25
}, {
time: "21:00",
value: 10
}, {
time: "20:00",
value: 16
}, {
time: "19:00",
value: 29
}, {
time: "18:00",
value: 20
}, {
time: "17:00",
value: 10
}, {
time: "16:00",
value: 22
}, {
time: "15:00",
value: 23
}, {
time: "14:00",
value: 24
}, {
time: "13:00",
value: 29
}, {
time: "12:00",
value: 14
}, {
time: "11:00",
value: 10
}, {
time: "10:00",
value: 22
}, {
time: "09:00",
value: 23
}, {
time: "08:00",
value: 24
}, {
time: "07:00",
value: 29
}, {
time: "06:00",
value: 14
}, {
time: "05:00",
value: 20
}, {
time: "04:00",
value: 22
}, {
time: "03:00",
value: 26
}, {
time: "02:00",
value: 30
}, {
time: "01:00",
value: 15
}, {
time: "00:00",
value: 3
}]
}],
}, {
name: 'TCP状态',
lineData: [{
name: 'line1',
value: [{
time: "23:00",
value: 20
}, {
time: "22:00",
value: 25
}, {
time: "21:00",
value: 10
}, {
time: "20:00",
value: 16
}, {
time: "19:00",
value: 29
}, {
time: "18:00",
value: 20
}, {
time: "17:00",
value: 12
}, {
time: "16:00",
value: 3
}, {
time: "15:00",
value: 10
}, {
time: "14:00",
value: 23
}, {
time: "13:00",
value: 30
}, {
time: "12:00",
value: 35
}, {
time: "11:00",
value: 10
}, {
time: "10:00",
value: 22
}, {
time: "09:00",
value: 23
}, {
time: "08:00",
value: 24
}, {
time: "07:00",
value: 29
}, {
time: "06:00",
value: 14
}, {
time: "05:00",
value: 20
}, {
time: "04:00",
value: 22
}, {
time: "03:00",
value: 26
}, {
time: "02:00",
value: 30
}, {
time: "01:00",
value: 15
}, {
time: "00:00",
value: 3
}]
}],
}];
const values = data.map(d => d.lineData);
const titles = data.map(d => d.name);
const timeData = values[0][0].value.map(v => v.time)
let dataList = [];
values.forEach((line, i) => {
line.forEach((data, j) => {
dataList.push({
type: 'line',
name: data.name,
symbolSize: 4,
hoverAnimation: false,
xAxisIndex: i,
yAxisIndex: i,
data: data.value.map(d => d.value),
smooth: true
})
})
});
option = {
title: {
text: 'Awesome Chart'
},
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {},
series: [{
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
}],
toolbox: {
orient: 'vertical',
feature: {
dataZoom: {
yAxisIndex: 'none',
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
},
magicType: {
show: true,
type: ['line', 'bar'],
},
},
top: 70,
right: 20,
},
tooltip: {
trigger: 'axis',
show: true
},
dataZoom: [{
show: true,
realtime: true,
top: '20',
left: '5%',
right: '10%',
xAxisIndex: Array.from(new Array(titles.length), (val, index) => index)
}, {
type: 'inside',
realtime: true,
xAxisIndex: Array.from(new Array(titles.length), (val, index) => index)
}],
grid: titles.map((data, index) => {
const row = Math.floor(index / 3);
const col = index % 3;
return {
show: true,
top: (row + 1) * 120 + row * 200,
left: `${(col + 1) * 5 + col * 25}%`,
right: `${100 - ((col + 1) * 5 + col * 25) - 25}%`,
height: '200',
}
}),
xAxis: titles.map((title, i) => {
return {
gridIndex: i,
type: 'category',
boundaryGap: false,
axisLine: {
onZero: true
},
data: timeData,
}
}),
yAxis: titles.map((title, i) => {
return {
gridIndex: i,
name: title,
type: 'value'
}
}),
series: dataList,
/*axisPointer: {
link: [{
xAxisIndex: 'all',
}],
label: {
backgroundColor: '#777'
}
},*/
};
截图如下
