Quarto折叠式callout块中echarts4r图表被压缩的问题

在Quarto中制作报告时，将echarts4r生成的图表放入默认折叠的.callout-caution块中，展开折叠块后图表无法自适应容器尺寸；但设置collapse=false时显示正常，且ggplot、highcharter等其他绘图包无此问题。已尝试调整代码块的fig.width参数和e_grid()的位置设置，均未解决问题。

可复现代码如下：

---
title: "Reprex Report"
format: 
  html:
    page-layout: full
editor: visual
---

```{r, message=FALSE, echo=FALSE, include=FALSE}
library(tidyverse)
library(echarts4r)

df <- data.frame (Month  = c("Apr-23", "May-23", "Jun-23", "Jul-23", "Aug-23", "Sep-23", "Oct-23", "Nov-23",
                             "Dec-23", "Jan-24", "Feb-24", "Mar-24"),
                  a = c(18,44,70,45,69,68,52,54,NA,NA,NA,NA),
                  b = c(527,751,721,633,696,675,775,732,NA,NA,NA,NA),
                  c = c(14,23,28,4,2,14,18,30,NA,NA,NA,NA))

Activity #

::: callout-tip

Description #

Blah blah blah
:::

::: {.callout-caution collapse="true"}

Plot #

df %>%
  e_chart(Month) %>% 
  e_bar(a, stack = "groups", color = "green") %>%
  e_bar(b, stack = "groups", color = "red") %>%
  e_bar(c, stack = "groups", color = "blue") %>%
  e_labels(position = "inside", fontSize = 16) %>% 
  e_y_axis(name = "Activity", nameLocation ="middle", 
           nameTextStyle = list(padding = c(0,0,30,0))) %>%
  e_x_axis(type = "category", name = "Month",
           nameLocation ="middle", nameTextStyle = list(padding = c(20,0,0,0))) %>% 
  e_tooltip(axisPointer = list(type = "shadow"), 
            trigger = "axis",
            backgroundColor = "rgba(40, 40, 40, 0.75)", 
            borderColor = "rgba(0, 0, 0, 0)", textStyle = list(color = "#fcfcff")) %>% 
  e_grid(right = "2%", left = "8%", bottom = "10%", top = "5%")

:::

# 解决方案
问题核心原因是：折叠块初始状态为隐藏，echarts初始化时获取的容器尺寸为0，展开后不会自动触发重绘。需要添加自定义JavaScript代码，监听折叠块的展开事件，手动触发echarts实例的尺寸调整。

修改后的完整代码如下，在文档头部添加HTML代码块插入监听脚本：
```yaml
---
title: "Reprex Report"
format: 
  html:
    page-layout: full
editor: visual
---

```{=html}
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 监听所有callout块的折叠/展开事件
  document.querySelectorAll('.callout').forEach(callout => {
    callout.addEventListener('shown.bs.collapse', function() {
      // 找到当前callout内的echarts容器
      const echartsContainers = this.querySelectorAll('.echarts4r');
      echartsContainers.forEach(container => {
        // 获取echarts实例并触发resize
        const chart = echarts.getInstanceByDom(container);
        if (chart) {
          chart.resize();
        }
      });
    });
  });
});
</script>

library(tidyverse)
library(echarts4r)

df <- data.frame (Month  = c("Apr-23", "May-23", "Jun-23", "Jul-23", "Aug-23", "Sep-23", "Oct-23", "Nov-23",
                             "Dec-23", "Jan-24", "Feb-24", "Mar-24"),
                  a = c(18,44,70,45,69,68,52,54,NA,NA,NA,NA),
                  b = c(527,751,721,633,696,675,775,732,NA,NA,NA,NA),
                  c = c(14,23,28,4,2,14,18,30,NA,NA,NA,NA))

Activity #

::: callout-tip

Description #

Blah blah blah
:::

::: {.callout-caution collapse="true"}

Plot #

df %>%
  e_chart(Month) %>% 
  e_bar(a, stack = "groups", color = "green") %>%
  e_bar(b, stack = "groups", color = "red") %>%
  e_bar(c, stack = "groups", color = "blue") %>%
  e_labels(position = "inside", fontSize = 16) %>% 
  e_y_axis(name = "Activity", nameLocation ="middle", 
           nameTextStyle = list(padding = c(0,0,30,0))) %>%
  e_x_axis(type = "category", name = "Month",
           nameLocation ="middle", nameTextStyle = list(padding = c(20,0,0,0))) %>% 
  e_tooltip(axisPointer = list(type = "shadow"), 
            trigger = "axis",
            backgroundColor = "rgba(40, 40, 40, 0.75)", 
            borderColor = "rgba(0, 0, 0, 0)", textStyle = list(color = "#fcfcff")) %>% 
  e_grid(right = "2%", left = "8%", bottom = "10%", top = "5%")

:::

### 说明
- 脚本通过监听Bootstrap的`shown.bs.collapse`事件（Quarto的callout基于Bootstrap折叠组件），在折叠块展开时触发
- 找到callout内所有`.echarts4r`类的容器，获取对应的echarts实例并调用`resize()`方法，让图表自适应当前容器尺寸
- 该方案对所有包含echarts4r图表的折叠callout块都生效，无需单独配置每个图表

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