如何为echarts4r图表添加边距以适配坐标轴名称？

核心问题是默认绘图区域（grid）的边距不足以容纳大字号的坐标轴名称，导致标签与名称重叠，添加padding后名称又超出容器。可以通过e_grid()函数手动调整绘图区域的边距，为坐标轴名称预留足够空间。

解决方案代码 #

library(echarts4r)
df <- data.frame(
  x = seq(50),
  y = rnorm(50, 10, 3),
  z = rnorm(50, 11, 2),
  w = rnorm(50, 9, 2)
)

df |>
  e_charts(x) |>
  e_line(z) |>
  e_hide_grid_lines(which = c("x", "y")) |>
  # 关键：调整绘图区域边距，适配大字号坐标轴名称
  e_grid(
    top = "8%",    # 上边距，避免和图例重叠
    right = "5%",  # 右边距
    bottom = "22%",# 下边距，给X轴名称留足空间
    left = "22%"   # 左边距，给Y轴名称留足空间
  ) |>
  e_x_axis(
    name = "X axis name",
    nameLocation = "center",
    nameTextStyle = list(fontSize = 35),
    type = 'value',
    min = 5, 
    max = 21, 
    axisLabel = list(fontSize = 25),
    axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
  ) |>
  e_y_axis(
    name = "Y axis name",
    nameLocation = "center",
    nameTextStyle = list(fontSize = 35),
    type = 'value',
    min = -2, 
    max = 15, 
    axisLabel = list(fontSize = 25),
    axisLine = list(lineStyle = list(width = 2))
  ) |>
  e_legend(textStyle = list(fontSize = 35))

关键说明 #

• e_grid()的参数支持像素（如bottom = 80）或百分比（如bottom = "22%"），可根据实际字体大小灵活调整：
  • bottom：控制X轴名称与图表底部的距离
  • left：控制Y轴名称与图表左侧的距离
  • top：避免大字号图例与绘图区域重叠
• 移除了坐标轴名称的padding设置，改用调整绘图区域边距的方式，彻底解决名称超出容器的问题

Quarto RevealJS适配技巧 #

如果在演示文稿中仍有显示问题，可通过以下方式优化：

1. 在代码块中指定图表尺寸：

```{r, fig.width=10, fig.height=7}
# 上述绘图代码

2. 在Quarto的YAML配置中调整幻灯片尺寸和边距：
```yaml
format:
  revealjs:
    slide-width: 1200px
    slide-height: 800px
    margin: 0.1

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