【echarts】 tooltip formatter的使用

分享两种写法

tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            let bar = params.filter((item) => item.seriesType === 'bar');
            let line = params.filter((item) => item.seriesType === 'line');

            let list = [];
            let listItem = '';
            for (var j = 0; j < bar.length; j++) {
              let i = bar.length - j - 1;
              console.log(params[i]);
              list.push(
                '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                  params[i].color +
                  ';margin-right: 5px;border-radius: 50%;}"></i>' +
                  '<span style="width:30px; display:inline-block;">' +
                  bar[i].seriesName +
                  '</span><span style="width:100px; display:inline-block;">&nbsp&nbsp正常：' +
                  bar[i].data +
                  '%' +
                  '</span>' +
                  '&nbsp&nbsp总量：' +
                  line[i].data
              );
            }
            listItem = list.join('<br>');
            return '<div class="showBox">' + listItem + '</div>';
          },
        }

tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: (param) => {
            const temp = {};
            param.forEach((item) => {
              temp[item.seriesName] = temp[item.seriesName] || {};
              temp[item.seriesName].marker = item.marker;
              temp[item.seriesName].seriesName = item.seriesName;
              item.seriesType === "bar"
                ? (temp[item.seriesName].total = item.data)
                : (temp[item.seriesName].ontimerate = item.data + "%");
            });
            return Object.values(temp).reduce(
              (pre, cur) =>
                (pre += `${cur.marker} ${cur.seriesName}   正常：${cur.ontimerate}   总量： ${cur.total}</br>`),
              ""
            );
          },
        }