如何在echarts4r中使用Proxy修改指定柱状图的颜色？

问题背景 #

在Shiny框架中使用echarts4r时，需要通过Proxy修改现有柱状图中特定数据点（第三个柱子）的颜色为红色，同时实现恢复默认颜色的功能，而非添加新系列。

完整解决方案代码 #

library(shiny)
library(echarts4r)

set.seed(123) # 设置随机种子保证数据可复现
df <- data.frame(
  x = 1:5,
  y = runif(n = 5, min = 50, max = 200)
)

ui <- fluidPage(
  echarts4rOutput("chart"),
  actionButton("changecolor", "修改第三个柱子颜色为红色"),
  actionButton("removecolor", "恢复第三个柱子默认颜色")
)

server <- function(input, output){
  
  output$chart <- renderEcharts4r({
    e_charts(df, x) |>
      e_bar(y, name = "数据系列")
  })
  
  observeEvent(input$changecolor, {
    echarts4rProxy("chart") |>
      e_set_option(
        series = list(
          list(
            itemStyle = list(
              # 用JS回调函数根据数据索引设置颜色
              color = htmlwidgets::JS("function(params) {
                // ECharts数据索引从0开始，第三个柱子对应索引2
                return params.dataIndex === 2 ? 'red' : '#5470c6';
              }")
            )
          )
        )
      )
  })
  
  observeEvent(input$removecolor, {
    echarts4rProxy("chart") |>
      e_set_option(
        series = list(
          list(
            itemStyle = NULL # 重置样式，恢复默认颜色
          )
        )
      )
  })
  
}

shinyApp(ui, server)

关键逻辑说明 #

• 修改颜色：借助e_set_option直接更新ECharts配置，通过JS回调函数判断数据索引，为目标柱子指定红色，其余柱子使用echarts4r默认柱状图颜色#5470c6。
• 恢复颜色：将itemStyle设为NULL，让图表重置回初始默认样式。
• 注意点：必须用htmlwidgets::JS()包裹JS代码，确保ECharts能正确识别回调逻辑；若存在多个系列，需在series列表中指定对应系列的索引或名称。

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