Echarts的formatter函数用法

tooltip是提示框组件 formatter是提示框内容

下面是错误的代码,在对右上角4个按钮进行切换时,会报错,因为formatter内返回的参数点击之后,数据会减少。
在这里插入图片描述

 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>`
          ;
          },
        },

所以将代码改良了下,便利val这个list,进行判断,在加上去最后return出去。

   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;
          },
        },
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百事可口

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值