echarts4r如何设置柱状图起始值为自定义阈值并按值分色

需求描述 #

使用echarts4r绘制柱状图需满足以下规则：

• 柱体以指定非0阈值为起始位置绘制，而非默认的0值位置
• 数值高于阈值的柱体显示为绿色，低于阈值的柱体显示为红色

阈值为0时的常规分色方案在非0阈值场景下失效，核心原因是ECharts柱状图默认渲染基线固定为0，无法直接通过基础配置项修改单个柱系列的起始位置。

问题复现 #

最小复现代码及默认效果如下：

library(echarts4r)
set.seed(1)
df <- data.frame(
  x = 1:10,
  y = 1 + cumsum(rnorm(10, 0, 0.1))
)
df %>% 
  e_charts(x) %>% 
  e_bar(y) %>% 
  e_visual_map(
    type = "piecewise",
    pieces = list(
      list(
        gt = 1,
        color = "green"
      ),
      list(
        lte = 1,
        color = "red"
      )
    )
  )

目标效果可参考ggplot2实现版本：

library(ggplot2)
CUTOFF <- 1
df$color <- ifelse(df$y > CUTOFF, "green", "red")
ggplot(df, aes(xmin = x - 0.5, xmax = x + 0.5,
               ymin = CUTOFF, ymax = y, fill = I(color))) +
  geom_rect()

实现方法 #

利用ECharts堆叠柱状图特性即可实现需求，核心逻辑如下：

• 新增透明占位柱系列，所有值等于设定阈值，作为柱体的起始基线
• 新增差值柱系列，值为实际值与阈值的差值，和占位柱设置为同一堆叠组
• 对差值柱应用分段视觉映射：差值大于0（实际值高于阈值）显示绿色，小于等于0显示红色
• 隐藏占位柱的交互效果，调整提示框显示原始数值即可

完整可运行代码：

library(echarts4r)
set.seed(1)
# 可自定义任意阈值
CUTOFF <- 1
df <- data.frame(
  x = 1:10,
  y = 1 + cumsum(rnorm(10, 0, 0.1))
)
# 构造绘图所需字段
df$baseline <- CUTOFF
df$diff_val <- df$y - CUTOFF

df %>% 
  e_charts(x) %>%
  # 透明占位基线柱
  e_bar(
    baseline, 
    stack = "bar_group",
    itemStyle = list(color = "transparent"),
    emphasis = list(itemStyle = list(color = "transparent")),
    tooltip = list(show = FALSE)
  ) %>%
  # 实际显示的差值柱
  e_bar(diff_val, stack = "bar_group", name = "指标值") %>%
  # 按阈值规则分色
  e_visual_map(
    type = "piecewise",
    seriesIndex = 1,
    show = FALSE,
    pieces = list(
      list(gt = 0, color = "green"),
      list(lte = 0, color = "red")
    )
  ) %>%
  # 调整提示框显示原始数值
  e_tooltip(
    formatter = htmlwidgets::JS(paste0("
      function(params){
        const originVal = (params[1].value[1] + ", CUTOFF, ").toFixed(2)
        return params[0].value[0] + '<br/>指标值：' + originVal
      }
    "))
  )

运行上述代码即可得到和ggplot2参考版本完全一致的效果，修改CUTOFF参数即可适配任意自定义阈值，不需要调整其他配置。

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