如何让Shiny Dashboard中echarts4r图表填满box容器

在Shiny Dashboard的box容器中使用echarts4r绘制图表时，图表无法填满容器，左右两侧存在明显空白边距，需要让图表填满容器的可用区域。

原示例代码 #

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


test<-data.frame(replicate(10,sample(0:50,100,rep=TRUE)))
date <- as.Date("2021/08/04")

# defining length of range 
len <- 100

# generating range of dates
test$date<-seq(date, by = "day", length.out = len)

ui <-dashboardPage(
  dashboardHeader(title = "cran.rstudio.com"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard")
    )
  ),
  dashboardBody(
    tabItems(
      tabItem("dashboard",
        fluidRow(
          valueBoxOutput("rate"),
          valueBoxOutput("count"),
          valueBoxOutput("users")
        ),
        fluidRow(
          box(
            width = 8, status = "info", solidHeader = TRUE,
            title = "Population X1 to X10",
            echarts4rOutput(
              outputId = "plot1")
          )
        )
      )
    )
  )
)

server <- function(input, output, session) {
  
  output$plot1 <- renderEcharts4r({
    test |>
      e_charts(x = date) |>
      e_area(
        X1,
        name = "X1",
        x_index = 0,
        y_index = 1
      )|>
      e_line(
        X2,
        x_index = 0,
        y_index = 0,
        lineStyle = list(
          color = "#39558CFF",
          width = 2,
          opacity = 0.8
        )
      ) |>
      e_line(
        X3,
        x_index = 0,
        y_index = 1,
        lineStyle = list(
          color = "#FA2B2B",
          width = 1.8,
          opacity = 0.7
        )
      ) |>
      e_line(
        X4,
        x_index = 0,
        y_index = 1,
        lineStyle = list(
          color = "#ED7D3A",
          width = 1.8,
          opacity = 0.8,
          type = "dotted"
        )
      )  |>
      e_datazoom(
        x_index = c(0, 1),
        toolbox = FALSE,
        start = dim(test)[1]-45,
        end = dim(test)[1]
      ) |>
      e_axis_labels(y = "test box") |>
      e_show_loading() |>
      e_tooltip(trigger = "axis") |>
      e_x_axis(date, axisPointer = list(show = TRUE,
                                        label = list(show = FALSE)))
  })
}

shinyApp(ui = ui, server = server)

解决方法 #

要消除图表左右的空白边距，需要做两处修改：

• UI层：给echarts4rOutput添加width = "100%"参数，让图表容器占满box的宽度。
• ECharts配置层：使用e_grid()函数设置图表的left、right、top、bottom为0，移除ECharts默认的内边距。

修改后的完整代码 #

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


test<-data.frame(replicate(10,sample(0:50,100,rep=TRUE)))
date <- as.Date("2021/08/04")

# defining length of range 
len <- 100

# generating range of dates
test$date<-seq(date, by = "day", length.out = len)

ui <-dashboardPage(
  dashboardHeader(title = "cran.rstudio.com"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard")
    )
  ),
  dashboardBody(
    tabItems(
      tabItem("dashboard",
        fluidRow(
          valueBoxOutput("rate"),
          valueBoxOutput("count"),
          valueBoxOutput("users")
        ),
        fluidRow(
          box(
            width = 8, status = "info", solidHeader = TRUE,
            title = "Population X1 to X10",
            # 设置图表输出宽度为100%
            echarts4rOutput(
              outputId = "plot1", width = "100%")
          )
        )
      )
    )
  )
)

server <- function(input, output, session) {
  
  output$plot1 <- renderEcharts4r({
    test |>
      e_charts(x = date) |>
      e_area(
        X1,
        name = "X1",
        x_index = 0,
        y_index = 1
      )|>
      e_line(
        X2,
        x_index = 0,
        y_index = 0,
        lineStyle = list(
          color = "#39558CFF",
          width = 2,
          opacity = 0.8
        )
      ) |>
      e_line(
        X3,
        x_index = 0,
        y_index = 1,
        lineStyle = list(
          color = "#FA2B2B",
          width = 1.8,
          opacity = 0.7
        )
      ) |>
      e_line(
        X4,
        x_index = 0,
        y_index = 1,
        lineStyle = list(
          color = "#ED7D3A",
          width = 1.8,
          opacity = 0.8,
          type = "dotted"
        )
      )  |>
      e_datazoom(
        x_index = c(0, 1),
        toolbox = FALSE,
        start = dim(test)[1]-45,
        end = dim(test)[1]
      ) |>
      e_axis_labels(y = "test box") |>
      e_show_loading() |>
      e_tooltip(trigger = "axis") |>
      e_x_axis(date, axisPointer = list(show = TRUE,
                                        label = list(show = FALSE))) |>
      # 设置图表网格边距为0，消除内边距
      e_grid(left = 0, right = 0, top = 0, bottom = 0)
  })
}

shinyApp(ui = ui, server = server)

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