自定义echart tooltip提示

echart 初始tooltip设定是

 tooltip: {
      trigger: "item",
    },

效果如下：

简单修改

在series里面添加

 tooltip: {
              valueFormatter: function (value) {
                return value + '自定义内容';
              },
            },

效果：

option部分代码

 let option = {
    tooltip: {
      trigger: "item",
    },
    xAxis: {
      type: "category",
      data: ["斑马鱼", "迷你鹦鹉鱼", "泥鳅", "迷你珍珠草"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        tooltip: {
          valueFormatter: function (value) {
            return value + "自定义内容";
          },
        },
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
    ],
  };

如果要求更复杂，可以修改series同级的tooltip

效果如下

代码

 let option = {
    tooltip: {
      trigger: "axis",
      formatter(params) {
        if (params) {
          return `
                <div>${params[0].name}</div>
                
                <div style='display: flex; align-items: center'>
                      <div style='width: 6px; height: 6px; background:#31A4FD; border-radius: 6px'></div>
                      <div style='margin-left:6px'>标题：${params[0].data}
                      </div>
                </div>
                `;
        } else {
          return "";
        }
      },
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
      data: ["斑马鱼", "迷你鹦鹉鱼", "泥鳅", "迷你珍珠草"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
    ],
  };