echarts4r结合tabsetPanel：切换标签时重复触发图表动画的优化方案

当前通过在renderEcharts4r中加入input$tabsetpanel触发重新渲染的方式，会导致图表销毁重建，出现收缩卡顿。更优方案是利用echarts4rProxy操作已渲染的图表实例，仅更新数据并触发动画，避免重复渲染。

完整实现代码 #

library(echarts4r)
library(magrittr)

ui <- fluidPage(
  tabsetPanel(id = "tabsetpanel", 
              tabPanel("Panel A", value = "A", echarts4rOutput("chartA")),
              tabPanel("Panel B", value = "B", echarts4rOutput("chartB"))
  )
)

server <- function(input, output, session) {
  # 预定义图表数据，避免重复创建
  data_a <- reactiveVal(data.frame(x = 1:2, y = 1:10))
  data_b <- reactiveVal(data.frame(x = 1:5, y = 11:20))
  
  # 初始化图表，仅渲染一次
  output$chartA <- renderEcharts4r({
    data_a() %>%
      e_charts(x = x) %>%
      e_bar(serie = y, animationDuration = 1000) %>% # 配置动画时长
      e_animation(opts = list(easing = "cubicOut")) # 配置动画曲线
  })
  
  output$chartB <- renderEcharts4r({
    data_b() %>%
      e_charts(x = x) %>%
      e_bar(serie = y, animationDuration = 1000) %>%
      e_animation(opts = list(easing = "cubicOut"))
  })
  
  # 监听tab切换事件，触发对应图表的动画更新
  observeEvent(input$tabsetpanel, {
    current_tab <- input$tabsetpanel
    
    if (current_tab == "A") {
      # 获取chartA的代理对象
      proxy <- echarts4rProxy("chartA", session)
      # 更新系列数据并触发动画
      proxy %>%
        e_update_series(
          series_name = "y",
          data = data_a()$y,
          animation = TRUE,
          animationDuration = 1000
        )
    } else if (current_tab == "B") {
      proxy <- echarts4rProxy("chartB", session)
      proxy %>%
        e_update_series(
          series_name = "y",
          data = data_b()$y,
          animation = TRUE,
          animationDuration = 1000
        )
    }
  })
}

shinyApp(ui, server)

关键实现逻辑 #

1. 图表仅初始化一次：renderEcharts4r仅在应用启动时执行一次，生成图表实例，避免重复渲染带来的收缩卡顿问题。
2. 通过Proxy操作已渲染图表：使用echarts4rProxy获取已存在的图表实例，仅更新数据而非重建图表，保证切换流畅。
3. 绑定tab切换事件：监听input$tabsetpanel的变化，切换到对应tab时，调用e_update_series更新数据并触发动画配置。
4. 自定义动画参数：通过animationDuration、animation等参数控制动画时长与效果，确保每次切换都能触发完整的入场动画。

拓展：复杂动画配置 #

如果需要逐元素延迟等自定义动画效果，可通过e_set_option直接传递ECharts原生配置：

proxy %>%
  e_set_option(
    series = list(
      list(
        name = "y",
        data = data_a()$y,
        animation = TRUE,
        animationDuration = 1000,
        animationDelay = function(idx) idx * 100 # 逐列延迟动画
      )
    ),
    notMerge = FALSE
  )

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