Quarto RevealJS中{echarts4r}生成图表模糊的原因及解决方法

原因 #

• 像素密度适配不足：echarts4r默认生成的图表画布基于常规网页的低像素密度，RevealJS幻灯片展示时会缩放内容，拉伸低分辨率画布导致模糊。
• 容器与画布尺寸不匹配：图表画布的默认尺寸未适配RevealJS幻灯片容器的实际大小，当幻灯片放大（比如全屏展示）时，画布无法提供足够的像素细节。

解决办法 #

1. 强制设置高分辨率画布 #

在e_charts()中指定宽高，并通过e_opts()设置设备像素比，让图表生成足够清晰的像素内容：

cns |>
  e_charts(country, width = "100%", height = "600px") |>
  e_map(value) |>
  e_visual_map(value) |>
  e_opts(devicePixelRatio = window.devicePixelRatio)

window.devicePixelRatio会自动获取当前设备的像素密度，确保图表在不同设备上都有清晰表现。

2. 开启响应式适配 #

让echarts图表自动适配容器尺寸变化，避免拉伸模糊：

cns |>
  e_charts(country) |>
  e_map(value) |>
  e_visual_map(value) |>
  e_responsive(TRUE)

开启响应式后，图表会在容器尺寸变化时重新渲染，保持清晰度。

3. 调整Quarto RevealJS配置 #

在YAML头部指定固定幻灯片宽高，让图表基于明确的容器尺寸生成画布：

---
title: "Habits"
author: "John Doe"
format: 
  revealjs:
    width: 1280
    height: 720
---

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