Shiny中基于echarts4r的柱状图实现动态合计功能的技术问询

我理解你现在在Shiny项目里用echarts4r做销售数据可视化，想要给柱状图添加两个动态更新的功能：一是顶部显示随图例选择变化的总销售额，二是在柱子右侧显示对应年份下选中分类的销售合计值。这两个功能需要结合Shiny的响应式机制和echarts的交互回调来实现，下面是完整的解决方案：

核心需求回顾 #

• 动态顶部合计：随图例的选中/取消操作实时更新总销售额
• 柱子右侧分类合计：每个年份下，根据当前选中的分类计算合计值并显示在对应年份柱子的右侧

完整实现代码 #

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

# 示例销售数据
data <- data.frame(
  Year = rep(c("2020", "2021", "2022"), each = 4),
  Category = rep(c("Electronics", "Clothing", "Books", "Home"), 3),
  Sales = c(300, 200, 150, 250,
            350, 220, 180, 280,
            400, 250, 200, 320)
)

ui <- fluidPage(
  # 顶部动态合计展示区域
  h4("当前总销售额：", textOutput("total_sales", inline = TRUE)),
  # echarts图表容器
  echarts4rOutput("sales_chart")
)

server <- function(input, output, session) {
  
  # 响应式过滤数据：根据图例选中状态动态筛选
  filtered_data <- reactive({
    # 获取echarts图例的选中状态输入
    legend_selected <- input$sales_chart_legend_selected
    # 默认选中所有分类
    if(is.null(legend_selected)){
      return(data)
    }
    # 提取选中的分类名称
    selected_cats <- names(legend_selected[legend_selected == TRUE])
    data %>% filter(Category %in% selected_cats)
  })
  
  # 渲染动态总销售额
  output$total_sales <- renderText({
    filtered_data() %>% 
      summarise(total = sum(Sales)) %>% 
      pull(total) %>% 
      formatC(format = "d", big.mark = ",")  # 格式化千位分隔符
  })
  
  # 渲染echarts4r柱状图
  output$sales_chart <- renderEcharts4r({
    data %>% 
      group_by(Year, Category) %>% 
      e_charts(Year) %>% 
      e_bar(Sales, stack = "total") %>% 
      e_legend(selectmode = "multiple") %>% 
      e_tooltip(trigger = "axis") %>% 
      # 添加柱子右侧的合计标签，通过JS回调处理选中状态
      e_label(
        show = TRUE,
        position = "right",
        formatter = htmlwidgets::JS("
          function(params) {
            // 获取当前所有选中的系列分类
            var selectedSeries = [];
            var chartOption = this.getOption();
            for(var i=0; i<chartOption.legend[0].data.length; i++){
              if(chartOption.legend[0].selected[chartOption.legend[0].data[i]]){
                selectedSeries.push(chartOption.legend[0].data[i]);
              }
            }
            // 计算当前年份下选中分类的销售合计
            var yearTotal = 0;
            for(var j=0; j<params.series.length; j++){
              if(selectedSeries.includes(params.series[j].name)){
                yearTotal += params.series[j].data[params.dataIndex];
              }
            }
            return yearTotal.toLocaleString();
          }
        ")
      ) %>% 
      # 启用echarts与Shiny的交互绑定，用于监听图例选中状态
      e_shiny(inputId = "sales_chart")
  })
}

shinyApp(ui, server)

关键功能说明 #

1. 动态顶部合计实现

   • 通过e_shiny(inputId = "sales_chart")开启echarts与Shiny的交互，让Shiny能捕获图例的选中状态（对应输入input$sales_chart_legend_selected）
   • 定义filtered_data响应式对象，实时根据图例选中状态过滤原始数据
   • 基于过滤后的数据计算总销售额，通过textOutput实时更新展示

2. 柱子右侧分类合计实现

   • 利用e_label的JS回调函数formatter，在客户端直接获取当前图例的选中状态
   • 遍历当前年份下的所有数据系列，累加选中分类的销售额，最终格式化显示合计值

这样两个功能都会随图例的选中/取消操作实时更新，完全匹配你的需求。

备注：内容来源于stack exchange，提问作者A.Arrigo