如何让echarts4r雷达图标签在任意屏幕完整显示？适配bslib::card

我在Shiny应用中使用echarts4r包创建雷达图时，遇到小屏幕下图例（轴标签）被截断的问题。希望无论屏幕尺寸如何，都能让标签完整显示（需要自动缩小图表以适配标签空间）。

用bs4Dash的box组件包裹雷达图时，图表能自动调整尺寸适配屏幕，但换成bslib::card后就无法实现这种适配效果，请问该怎么解决？

原始问题代码（无适配） #

library(shiny)
library(echarts4r)

ui <- fluidPage(
  tagList(
    echarts4rOutput("radar_chart")
  )
)

server <- function(input, output, session) {
  output$radar_chart <- renderEcharts4r({
    df <- data.frame(
      x = c("Loooong", "Verrrrry long", "Extreeeeeeeeemely long", "Short", "Min"),
      y = runif(5, 1, 5),
      z = runif(5, 3, 7)
    )
    
    df |>
      e_charts(x) |>
      e_radar(y, max = 7) |>
      e_radar(z) |>
      e_tooltip(trigger = "item") |>
      e_radar_opts(
        axisName = list(
          color = "black",
          fontFamily = "Libre Franklin",
          fontSize = 18
        ))
    })
}

shinyApp(ui, server)

bs4Dash可行示例（自动适配屏幕） #

library(shiny)
library(bs4Dash)
library(echarts4r)
library(data.table)
library(dplyr)


df = data.frame(name=c('A','B','C'),
                color = c('blue','white','green'),
                atr1 = c(34,45,32),
                atr2 = c(56,32,21),
                atr3 = c(23,45,21))

# UI

ui = dashboardPage(
  title = "Example radar plot",
  header = dashboardHeader(
    title = dashboardBrand(
      title = "radarchart test",
      color = "primary"
    )),
  
  sidebar = dashboardSidebar(
    selectizeInput('sel1','name',choices = NULL),
    selectizeInput('sel2','color',choices = NULL)
  ),
  body = dashboardBody(
    box(echarts4rOutput("radar"))
  )
)

# SERVER

server = function(input, output, session) {
  
  #Filter update
  updateSelectizeInput(session, 'sel1', choices = sort(unique(df$name)),selected = "A" ,server = TRUE)
  
  observeEvent(input$sel1, {
    updateSelectInput(session, inputId = "sel2", label="color",
                      choices = df[df$name==input$sel1,]$color)
  })
  
  #Table creation to use in radarplot
  dataradar = reactive({
    dataradar = df[df$name==input$sel1 & df$color == input$sel2, c('atr1','atr2','atr3')]
    dataradar = data.table(dataradar)
    dataradar = melt(dataradar, measure.vars = c(names(dataradar))) 
  })
  
  
  #radar plot
  output$radar <- renderEcharts4r({
    if(!nrow(dataradar()))
      return()
    
    dataradar() %>%
      e_charts(variable)  %>%
      e_radar(value) |> 
      e_radar_opts(
        axisName = list(
          color = "black",
          fontFamily = "Libre Franklin",
          fontSize = 18
        ))
  })
  
}

shinyApp(ui,server)

bs4Dash的box自带响应式布局和内部元素尺寸约束，而bslib::card默认没有针对echarts图表的自适应配置，需要从两方面调整：

1. 给card添加CSS样式，确保内部图表容器自适应父元素 #

在bslib::card中添加自定义CSS，让图表容器的高度和宽度随card自适应，同时限制最小尺寸避免过度压缩：

card(
  style = "height: 100%; min-height: 400px; padding: 1rem;",
  echarts4rOutput("radar_chart", height = "100%")
)

2. 配置echarts4r的自适应参数 #

在renderEcharts4r中添加e_resize()函数监听窗口变化，同时通过e_radar_opts调整轴标签布局策略：

• e_resize()：窗口尺寸变化时自动重绘图表
• axisName.formatter：用JS函数实现长标签换行，避免横向溢出
• radius：缩小雷达图半径，给标签预留更多空间

完整可运行示例 #

library(shiny)
library(bslib)
library(echarts4r)

ui <- page_sidebar(
  card(
    style = "height: 100%; min-height: 400px; padding: 1rem;",
    echarts4rOutput("radar_chart", height = "100%")
  )
)

server <- function(input, output, session) {
  output$radar_chart <- renderEcharts4r({
    df <- data.frame(
      x = c("Loooong", "Verrrrry long", "Extreeeeeeeeemely long", "Short", "Min"),
      y = runif(5, 1, 5),
      z = runif(5, 3, 7)
    )
    
    df |>
      e_charts(x) |>
      e_radar(y, max = 7) |>
      e_radar(z) |>
      e_tooltip(trigger = "item") |>
      # 监听窗口尺寸变化自动调整图表
      e_resize() |>
      e_radar_opts(
        axisName = list(
          color = "black",
          fontFamily = "Libre Franklin",
          fontSize = 18,
          # 长标签自动换行
          formatter = JS("function(name) { return name.length > 8 ? name.split('').join('\\n') : name; }"),
          # 调整标签与雷达图的距离
          distance = 20
        ),
        # 缩小雷达图半径，给标签留空间
        radius = "70%"
      )
  })
}

shinyApp(ui, server)

内容的提问来源于Stack Exchange，提问作者umair durrani