Echarts4r自定义Tooltip如何实现数值右对齐？

想要复刻Echarts4r的默认Tooltip样式并添加额外内容，但自定义后系列名和数值均左对齐，可读性较差。以下是示例数据及尝试代码：

示例数据与原始尝试代码 #

library(dplyr)
library(echarts4r)
library(htmlwidgets)

set.seed(10)
data <- data.frame(name = rep(c("Bob", "Michael"), each = 10), 
                   x = rep(0:9, 2), 
                   y = sample(0:5, 20, replace = TRUE),
                   add = sample(1:100, 20, replace = TRUE))

# 默认Tooltip（数值右对齐）
data %>% 
  group_by(name) %>% 
  e_chart(x = x) %>% 
  e_line(serie = y) %>% 
  e_tooltip(trigger = "axis")

# 尝试复刻样式并添加内容的代码（数值左对齐，可读性差）
data %>% 
  group_by(name) %>% 
  e_chart(x = x) %>% 
  e_line(serie = y, bind = add) %>% 
  e_tooltip(trigger = "axis",
            formatter = JS("
              function(params){
              var colorSpan = color => `<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:` + color + `'></span>`;
              let rez = '<strong>Day ' + params[0].value[0] + '</strong>';
              
              params.forEach(item => {
                                       var xx  = '<br />' + colorSpan(item.color) + ' ' + item.seriesName + 
                                                 ' <strong>' + item.value[1] + '</strong> (' + item.name + ')';
                                       rez += xx;
                                     });
  
              return (rez)}"))

默认Tooltip的数值为右对齐，而自定义的Tooltip数值左对齐，可读性不佳。

修改后的解决方案 #

感谢@Russ提供的临时解决方案，在此基础上优化后实现了数值右对齐，修复后的代码如下：

# 为名称添加空格补全，保证系列名宽度一致
data <- data %>%
  mutate(nameAlt = stringr::str_pad(name, max(nchar(name)), "right"))

data %>% 
  group_by(nameAlt) %>% 
  e_chart(x = x) %>% 
  e_line(serie = y, bind = add) %>% 
  e_tooltip(trigger = "axis",
            formatter = JS("
              function(params){
              var colorSpan = color => `<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:` + color + `'></span>`;
              let rez = '<strong>Day ' + params[0].value[0] + '</strong><pre>';
              
              params.forEach(item => {
                                       var xx  = colorSpan(item.color)  + item.seriesName + 
                                                 '<span style=`float:right;margin-left:20px;`><strong>' + item.value[1] + '</strong> (' + item.name + ')</span></br>';
                                       rez += xx;
                                     });
              rez += '</pre>';
  
              return (rez)}")) %>% 
  # 移除图例中的多余空格，保证图例显示正常
  e_legend(formatter = JS("function(name){return(name.trim())}"))

修改后的Tooltip通过float:right实现数值右对齐，同时补全系列名宽度保证排版整齐，图例部分通过trim()去除多余空格，最终效果与默认Tooltip样式一致且添加了额外内容。

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