如何在echarts4r中配置trigger=axis的自定义提示框？

我JavaScript经验较少，看不懂官方的tooltip.formatter指南。现在有一个展示多年调查数据的折线图，调查方法逐年变更，变更年份会同时用两种方法计算结果并展示，方便用户查看影响。

示例数据集 #

eg_data <- tibble::tribble(
  ~fin_year, ~method, ~label,   ~value,
  "2020/21", "A",     "line1", 10,
  "2021/22", "A",     "line1", 13,
  "2021/22", "B",     "line1", 11,
  "2022/23", "B",     "line1", 23,
  "2023/24", "B",     "line1", 18,
  "2024/25", "B",     "line1", 20,
  "2024/25", "C",     "line1", 22,
  "2025/26", "C",     "line1", 25,
  "2020/21", "A",     "line2", 9,
  "2021/22", "A",     "line2", 14,
  "2021/22", "B",     "line2", 15,
  "2022/23", "B",     "line2", 10,
  "2023/24", "B",     "line2", 25,
  "2024/25", "B",     "line2", 28,
  "2024/25", "C",     "line2", 26,
  "2025/26", "C",     "line2", 10
) %>% mutate(year_method = paste(fin_year, method)) %>%
  group_by(label, method)

当前图表代码 #

e_charts(eg_data, x = fin_year) %>%
  # 添加折线
  e_line(value, bind = year_method) %>%
  # 在方法变更年份添加标记线
  reduce(
    .x = eg_data$fin_year[duplicated(eg_data$fin_year[eg_data$label == "line1"])],
    .f = \(x, y) {
      e_mark_line(x, data = list(xAxis = y), lineStyle = list(color = "#505050"),
                  title = "", symbol = "none", z = 0, silent = TRUE)
    }, .init = .
  ) %>%
  # 添加提示框
  e_tooltip(trigger = "axis")

当前2021/22年度的提示框内容为：2021/22 line1 13 line1 11 line2 14 line2 15，无法区分每个数值对应的计算方法。希望自定义提示框格式，实现以下两种效果之一：

效果一：按方法分组 #

2021/22 (A)
line1 13
line2 14
2021/22 (B)
line1 11
line2 15

效果二：按折线分组，标注方法 #

2021/22
line1 (A) 13
line1 (B) 11
line2 (A) 14
line2 (B) 15

首先需要修正折线图的bind参数，将label和method绑定，让系列名称包含这两个信息，这样才能在提示框中提取方法和折线标签。

实现效果一：按方法分组显示 #

e_charts(eg_data, x = fin_year) %>%
  # 修改bind参数，让系列名称格式为"line1 A"
  e_line(value, bind = paste(label, method)) %>%
  reduce(
    .x = eg_data$fin_year[duplicated(eg_data$fin_year[eg_data$label == "line1"])],
    .f = \(x, y) {
      e_mark_line(x, data = list(xAxis = y), lineStyle = list(color = "#505050"),
                  title = "", symbol = "none", z = 0, silent = TRUE)
    }, .init = .
  ) %>%
  e_tooltip(trigger = "axis", formatter = htmlwidgets::JS("
    function(params) {
      // 获取当前年份
      const year = params[0].axisValue;
      // 按方法分组存储数据
      const methodGroups = {};
      
      params.forEach(item => {
        // 从系列名称拆分出折线标签和方法
        const [label, method] = item.seriesName.split(' ');
        if (!methodGroups[method]) {
          methodGroups[method] = [];
        }
        methodGroups[method].push({ label, value: item.value });
      });
      
      // 拼接提示框内容
      let content = '';
      Object.keys(methodGroups).forEach(method => {
        content += `${year} (${method})<br/>`;
        methodGroups[method].forEach(item => {
          content += `${item.label} ${item.value}<br/>`;
        });
      });
      
      // 移除最后多余的换行标签
      return content.slice(0, -4);
    }
  "))

实现效果二：按折线分组标注方法 #

e_charts(eg_data, x = fin_year) %>%
  e_line(value, bind = paste(label, method)) %>%
  reduce(
    .x = eg_data$fin_year[duplicated(eg_data$fin_year[eg_data$label == "line1"])],
    .f = \(x, y) {
      e_mark_line(x, data = list(xAxis = y), lineStyle = list(color = "#505050"),
                  title = "", symbol = "none", z = 0, silent = TRUE)
    }, .init = .
  ) %>%
  e_tooltip(trigger = "axis", formatter = htmlwidgets::JS("
    function(params) {
      const year = params[0].axisValue;
      // 按折线标签分组存储数据
      const labelGroups = {};
      
      params.forEach(item => {
        const [label, method] = item.seriesName.split(' ');
        if (!labelGroups[label]) {
          labelGroups[label] = [];
        }
        labelGroups[label].push({ method, value: item.value });
      });
      
      // 拼接提示框内容
      let content = `${year}<br/>`;
      Object.keys(labelGroups).forEach(label => {
        labelGroups[label].forEach(item => {
          content += `${label} (${item.method}) ${item.value}<br/>`;
        });
      });
      
      return content.slice(0, -4);
    }
  "))

代码说明 #

1. 修正bind参数：将bind = year_method改为bind = paste(label, method)，让每个系列的名称格式为line1 A，同时包含折线标签和计算方法。
2. JS formatter逻辑：遍历提示框的参数数组，拆分出标签和方法信息，按需求分组后拼接成带换行的HTML内容，实现自定义提示格式。

内容的提问来源于stack exchange，提问作者takethesummer