如何在Shiny中将echarts4r柱状图左对齐并去除左侧多余空白

你要的效果可以通过调整echarts4r图表的内置边距，以及移除Shiny列容器的默认内边距实现，修改后的完整代码如下：

library(shiny)
library(dplyr)
library(echarts4r)

shinyApp(
  ui = fixedPage(
    # 移除column默认的左右内边距
    column(12, align="center", offset = 0, style = "padding-left:0 !important;",
           echarts4rOutput(
             "grafico", width = 1500, height = 350
           )
    )
    
  ),
  server = function(input, output){
    
    
    output$grafico <- renderEcharts4r({
      mtcars |>
        tibble::rownames_to_column("model") |> 
        mutate(total = mpg + qsec) |>
        arrange(desc(total)) |>
        e_charts(model) |>
        e_bar(mpg, stack = "grp") |>
        e_bar(qsec, stack = "grp") |>
        # 调整图表绘图区域的左边距，设为0即可紧贴左侧
        e_grid(left = 0)
      
    })
    
  }
)

修改说明 #

• e_grid(left = 0)：echarts图表默认左侧预留了坐标轴标签的显示空间，通过这个参数可以直接把绘图区域的左边界设为0，消除图表内部的左侧空白。如果调整后坐标轴标签显示不全，可以适当调大这个值，比如设为10（单位px）或者"1%"即可。
• 给column添加style = "padding-left:0 !important;"：Shiny默认的bootstrap列自带左右15px的内边距，这个样式可以强制移除容器层的左侧空白。

内容的提问来源于stack exchange，提问作者Jorge Hernández