echarts4r中如何在axis触发的tooltip中显示多个额外变量

当tooltip的触发方式设为"axis"时，参数params的结构和"item"模式完全不同——它是当前X轴对应所有系列的数据集数组，而非单个数据项，这也是之前e_add方法失效的核心原因。以下是实现需求的完整方案：

完整代码 #

library(echarts4r)
library(tibble)
library(dplyr)

set.seed(1234)
df <- tibble(
  a = as.factor(1:10),
  b = runif(10),
  dummy = rep(c("Group 1", "Group 2"),5),
  c = LETTERS[1:10],
  d = LETTERS[2:11]
)

df |>
  group_by(dummy) |>
  e_chart(a) |>
  e_line(b) |>
  # 将c和d合并到同一个extra字段，简化后续JS获取逻辑
  e_add_nested('extra', c, d) |>
  e_tooltip(
    trigger = "axis",
    formatter = htmlwidgets::JS(
      'function(params) {
        // 获取X轴的显示值
        let xVal = params[0].axisValue;
        // 构建tooltip基础内容
        let content = `<div><strong>X轴值: ${xVal}</strong></div>`;
        
        // 遍历添加所有分组的带颜色Y值
        params.forEach(item => {
          content += `
            <div>
              <span style="display:inline-block;margin-right:6px;border-radius:50%;width:12px;height:12px;background:${item.color};"></span>
              ${item.seriesName}: ${item.data.toFixed(4)}
            </div>
          `;
        });
        
        // 添加分隔线与额外变量
        content += '<hr style="margin:7px 0; border:none; border-top:1px solid #eee;">';
        // 同一X轴对应的所有数据项共享原始数据的c和d，取第一个即可
        content += `<div>额外变量c: ${params[0].data.extra.c}</div>`;
        content += `<div>额外变量d: ${params[0].data.extra.d}</div>`;
        
        return content;
      }'
    )
  )

关键说明 #

1. 简化额外变量存储：用e_add_nested把c和d合并到同一个extra字段，避免多个嵌套层级，让JS获取更便捷。
2. 适配axis模式的params结构：
   • 通过params[0].axisValue获取当前触发的X轴值；
   • 遍历params数组，为每个系列添加带对应颜色标记的Y值；
   • 同一X轴对应的所有系列数据，都来自原始数据的同一行，因此直接取params[0].data.extra就能拿到对应的c和d。
3. 样式优化：用圆形颜色标记匹配系列颜色，添加分隔线区分核心数据与额外变量，提升tooltip可读性。

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