如何调整echarts4r柱状图：移除无数据分类的空白区域

问题描述 #

当用ECharts绘制分组柱状图时，若X轴分类与分组变量的部分组合无数据，图表会在对应位置显示空白区域（比如group2/A、group1/C这类无数据组合的空白）。需要一种自动方案移除这些空白，避免手动设置柱子宽度（适配大量柱子的场景）。

示例场景 #

原始示例代码（模拟全数据场景，实际业务中存在缺失组合）：

library(tidyverse)
library(echarts4r)
x <- rep(c("A", "B", "C"), each = 100)
y <- rep(c("group1", "group2"), each = 150)
z <- runif(300, max = 10)

df <- tibble(x, y, z)

df %>% 
  group_by(y) %>% 
  e_charts(x) %>% 
  e_bar(z)

示例图表：存在无数据组合的空白区域

解决方案：数据驱动的X轴重构 #

核心思路是把X轴从原始分类替换为「仅包含有数据的分类-分组组合」，让图表只渲染存在数据的柱子，自动消除空白。

步骤1：构造带缺失的数据集（模拟实际业务场景） #

library(tidyverse)
library(echarts4r)

# 创建存在缺失组合的数据集：group2/A、group1/C无数据
df <- tibble(
  x = c(rep("A", 100), rep("B", 200), rep("C", 100)),
  y = c(rep("group1", 100), rep("group1", 100), rep("group2", 100), rep("group2", 100)),
  z = runif(400, max = 10)
) %>% 
  group_by(x, y) %>% 
  summarise(z = mean(z), .groups = "drop")

步骤2：预处理数据，生成唯一组合标签 #

将有数据的x（分类）和y（分组）组合成新的X轴标签，只保留存在数据的组合：

df_processed <- df %>% 
  mutate(x_y = paste(x, y, sep = " / ")) # 可自定义组合标签的显示格式

步骤3：绘制无空白的柱状图 #

直接使用新的组合标签作为X轴，自动渲染所有有数据的柱子：

df_processed %>% 
  e_charts(x_y) %>% 
  e_bar(z, name = "均值") %>% 
  e_x_axis(name = "分类/分组组合") %>% 
  e_y_axis(name = "Z值") %>% 
  e_tooltip(trigger = "axis")

进阶：保留分组颜色区分 #

如果需要给不同分组设置专属颜色，可通过自定义itemStyle实现：

# 定义分组颜色映射
color_map <- c("group1" = "#5470c6", "group2" = "#91cc75")

df_processed %>% 
  e_charts(x_y) %>% 
  # 动态绑定分组颜色
  e_bar(z, name = "均值", 
        itemStyle = list(color = JS("function(params) { return params.data.group_color; }"))) %>% 
  # 给每个数据点添加对应分组的颜色字段
  e_data(
    x_y, z, 
    group_color = color_map[df_processed$y]
  ) %>% 
  e_x_axis(name = "分类/分组组合") %>% 
  e_y_axis(name = "Z值") %>% 
  e_tooltip(trigger = "axis", 
            formatter = JS("function(params) {
              const data = params[0].data;
              const [category, group] = data.name.split(' / ');
              return `<div>${category} - ${group}</div><div>均值: ${data.z.toFixed(2)}</div>`;
            }")) %>% 
  e_legend(FALSE) # 关闭图例，X轴标签已包含分组信息

方案优势 #

• 完全数据驱动，无需手动配置柱子宽度或自定义系列，适合大量柱子的场景
• 自动过滤无数据的组合，彻底消除空白区域
• 保留分组的视觉区分，同时保证图表简洁性

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