Echarts4r堆叠柱状图focus="series"模式下tooltip追加额外变量方案

核心实现逻辑 #

• 保留trigger = "item"的tooltip触发配置，该模式默认仅响应鼠标悬停到的单个柱状分段，不会展示同一x轴下其他系列内容，天然匹配单分段展示需求
• 每个e_bar()层单独bind对应系列的百分比字段，不要将多列数据拼接为单字符串统一绑定
• 自定义JS格式化函数，提取当前悬停分段的原始数值、绑定的百分比值，拼接为tooltip展示内容
• 全程保留emphasis = list(focus = "series")配置，不影响原有悬停聚焦淡出其他系列的高亮效果

修正后完整可运行代码 #

library(echarts4r)
library(dplyr)

dt <- data.frame(zipcode =as.factor(1:3),
                 cat_a = c(1711, 1116, 1215),
                 cat_b = c(276, 1447, 1227),
                 cat_c = c(893, 794, 536),
                 percent_a = c(42.3, 27.6, 30.1),
                 percent_b = c(9.4, 49.1, 41.6),
                 percent_c = c(40.2, 35.7, 24.1),
                 total_abc= c(2880, 3357, 2978))

dt |> 
  e_charts(zipcode) |> 
  e_bar(cat_a, stack = "st", name="cat_a", y_index = 0, legend=TRUE, 
        emphasis = list(focus = "series"),
        bind = percent_a) |> 
  e_bar(cat_b, stack = "st", name="cat_b", y_index = 0, legend=TRUE, 
        emphasis = list(focus = "series"),
        bind = percent_b) |> 
  e_bar(cat_c, stack = "st", name="cat_c", y_index = 0, legend=TRUE, 
        emphasis = list(focus = "series"),
        bind = percent_c) |>
  e_title("Count by ZIP Code") |>
  e_x_axis(nameLocation= "middle", nameGap=25) |>
  e_axis_labels(x = "ZIP Codes", y="count") |>
  e_legend(bottom = 0, 
           selected = list('cat_a' = TRUE, 
                           'cat_b' = TRUE,
                           'cat_c' = TRUE)) |> 
  e_tooltip(
    trigger="item",
    textStyle=list(fontFamily="arial", fontSize=12),
    formatter = htmlwidgets::JS("
      function(params){
        return(
          params.marker + params.seriesName + '<br/>' +
          '计数：' + params.value[1] + '<br/>' +
          '占比：' + params.data.value + '%'
        )
      }
    ")
  ) |>
  e_animation(duration=2000)

之前方案失效原因 #

• bind绑定百分比未生效：将所有字段拼接为单个字符串绑定后，未在tooltip格式化函数中做字符串拆分解析，且未给每个系列单独匹配对应的百分比列，导致取值错位
• trigger="axis"模式不符合需求：该触发模式默认拉取同一x轴坐标下所有系列的数据生成tooltip，必然会展示全部分类的数值与占比，无法实现单分段单独展示的效果

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