Tooltip ist die Komponente der Eingabeaufforderungsbox. Formatierer ist der Inhalt der Eingabeaufforderungsbox
Das Folgende ist der falsche Code. Beim Umschalten der 4 Schaltflächen in der oberen rechten Ecke wird ein Fehler gemeldet, da nach dem Klicken auf die im Formatierer zurückgegebenen Parameter die Daten abnehmen.
tooltip: {
// 悬停样式
trigger: "axis",
padding: [10, 22],
backgroundColor: "rgba(66, 119, 108, 0.8)", //0.8
borderColor: "rgba(66, 119, 108, 0.8)",
textStyle: {
color: "#fff",
},
formatter: (val) => {
return `
<div>${
val[0] ? val[0].name : "-"}</div>
<div>xx告警 ：${
val[0] ? val[0].value : "-"}</div>
<div>心率告警 ：${
val[1] ? val[1].value : "-"}</div>
<div>xxx告警 ：${
val[2] ? val[2].value : "-"}</div>
<div>体温告警 ：${
val[3] ? val[3].value : "-"}</div>`
;
},
},
Daher wurde der Code verbessert, um die Beurteilung, das Hinzufügen und die endgültige Rückgabe der Val-Liste zu erleichtern.
tooltip: {
formatter: (val) => {
var res = `<div>${
val[0] ? val[0].name : "-"}</div>`;
val.forEach((item) => {
if (item.seriesName == "SOS告警") {
res += `<div>SOS告警 ：${
item.value ? item.value : "-"}</div>`;
} else if (item.seriesName == "心率告警") {
res += `<div>心率告警 ：${
item.value ? item.value : "-"}</div>`;
} else if (item.seriesName == "血氧告警") {
res += `<div>血氧告警 ：${
item.value ? item.value : "-"}</div>`;
} else if (item.seriesName == "体温告警") {
res += `<div>体温告警 ：${
item.value ? item.value : "-"}</div>`;
}
});
return res;
},
},