echarts 修改 tooltip 默认样式（使用 formatter 函数拼接加工）

2023-09-10 16:25:00

默认的 echarts tooltip 样式可能无法满足某些特定的视觉或交互需求。本文将介绍如何使用 formatter 函数来拼接加工 tooltip 内容，实现自定义样式。

前提知识

了解 echarts 的基础配置
熟悉 JavaScript 和 HTML

使用 formatter 函数自定义 tooltip

formatter 函数用于格式化 tooltip 中显示的内容。它接收一个参数对象，其中包含有关当前数据的详细信息，例如值、系列名称、数据名称等。

formatter: function (params) {
  // 拼接自定义内容
  return `${params.seriesName}：${params.value}<br/>${params.dataName}：${params.name}`;
}

示例：

option = {
  tooltip: {
    formatter: function (params) {
      return `${params.seriesName}：${params.value}<br/>${params.dataName}：${params.name}`;
    }
  },
  // ... 其他图表配置
};

设置 tooltip 样式

除了拼接内容，formatter 函数还可以通过返回 HTML 片段来设置 tooltip 的样式。例如，可以添加背景颜色、字体样式和边框。

formatter: function (params) {
  return `<div style="background-color: #eee; padding: 10px; border: 1px solid #ccc;">
            ${params.seriesName}：${params.value}<br/>
            ${params.dataName}：${params.name}
          </div>`;
}

示例：

option = {
  tooltip: {
    formatter: function (params) {
      return `<div style="background-color: #eee; padding: 10px; border: 1px solid #ccc;">
                ${params.seriesName}：${params.value}<br/>
                ${params.dataName}：${params.name}
              </div>`;
    }
  },
  // ... 其他图表配置
};