Quarto动态标签页中echarts4r图表无法渲染问题求助

问题根源 #

echarts4r生成的是HTMLwidgets交互式对象，和ggplot这类静态图形逻辑不同：静态图能直接被Quarto渲染，但HTMLwidgets需要被正确解析成可执行的HTML代码。之前用cat()输出的方式会把echarts的HTML代码当成纯文本输出，自然无法渲染出交互图表。

解决方案 #

方案1：用htmltools构建标签页结构

放弃cat()拼接HTML的方式，改用htmltools包直接构建标签页DOM结构，把echarts4r对象直接嵌入其中，Quarto会自动处理HTMLwidgets的解析：

library(echarts4r)
library(htmltools)

# 封装生成echarts图表的函数
make_echart <- function(data) {
  data |> 
    e_charts(mpg) |> 
    e_bar(disp)
}

# 动态生成标签页
tags$div(
  class = "tabset",
  lapply(unique(mtcars$cyl), function(cyl) {
    subset_data <- mtcars[mtcars$cyl == cyl, ]
    tags$div(
      class = "tab-panel",
      tags$h3(paste("气缸数：", cyl)),
      make_echart(subset_data)
    )
  })
)

把这段代码放在Quarto的R代码块中即可，无需额外设置results='asis'。

方案2：用asis引擎配合renderTags转HTML字符串

如果一定要用动态文本生成标签页，先把echarts4r对象转为可解析的HTML字符串，再通过asis输出：

library(echarts4r)
library(htmltools)

# 开始标签块
cat("::: {.tabset}\n")

# 循环生成每个标签页
for (cyl in unique(mtcars$cyl)) {
  subset_data <- mtcars[mtcars$cyl == cyl, ]
  # 生成图表并转为HTML字符串
  chart <- subset_data |> e_charts(mpg) |> e_bar(disp)
  chart_html <- renderTags(chart)$html
  
  # 输出标签标题和图表HTML
  cat(paste0("### 气缸数：", cyl, "\n"))
  cat(chart_html, "\n")
}

# 结束标签块
cat(":::\n")

注意这段代码要放在{r, results='asis'}的代码块中，让Quarto直接解析生成的HTML内容。

方案3：Shiny下载处理器中的处理

在Shiny里用Quarto渲染报告时，要确保模板qmd中使用上述两种方案之一，同时在Shiny环境中加载所需依赖包：

library(shiny)
library(echarts4r)
library(htmltools)
library(quarto)

ui <- fluidPage(
  downloadButton("download_report", "下载报告")
)

server <- function(input, output) {
  output$download_report <- downloadHandler(
    filename = function() {
      paste("echarts报告-", Sys.Date(), ".html", sep = "")
    },
    content = function(file) {
      # 复制模板qmd到临时文件
      temp_qmd <- tempfile(fileext = ".qmd")
      file.copy("report_template.qmd", temp_qmd, overwrite = TRUE)
      
      # 渲染报告
      quarto_render(temp_qmd, output_file = file)
    }
  )
}

shinyApp(ui, server)

模板qmd里按照方案1或2的方式嵌入echarts图表即可。

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