如何在Quarto Revealjs幻灯片展示时触发echarts4r图表动画？

要实现幻灯片激活时触发echarts4r动画、切换时重置，需结合Reveal.js的幻灯片事件与ECharts API控制，具体步骤如下：

1. 给ECharts图表添加唯一标识 #

修改R代码，在e_charts()中指定elementId，让JavaScript能精准定位图表元素：

library(tidyverse)
library(echarts4r)

data <- tibble(name = c("A", "B", "C", "D", "E", "F", "G"),
             number = c(9.7, 2.1, 2.1, 1.9, 1.9, 1.9, 80.4))

data %>% 
e_charts(name, elementId = "pie-chart") %>% # 添加唯一ID
e_pie(number, radius = c("50%", "70%")) %>% 
e_legend(orient = "vertical", right = "5", top = "65%")

2. 插入自定义JavaScript控制动画 #

在演示文稿中添加一个隐藏的JavaScript代码块，监听Reveal.js的幻灯片切换事件，控制图表的初始化与重置：

document.addEventListener('DOMContentLoaded', function() {
  const reveal = Reveal.get();
  
  // 初始化图表，触发默认动画
  function initChart() {
    const chartDom = document.getElementById('pie-chart');
    if (chartDom) {
      // 先销毁已存在的图表实例
      if (window.echarts.getInstanceByDom(chartDom)) {
        window.echarts.dispose(chartDom);
      }
      // 读取echarts4r生成的配置项，重新初始化图表
      const myChart = window.echarts.init(chartDom);
      const option = JSON.parse(chartDom.getAttribute('data-option'));
      myChart.setOption(option);
    }
  }
  
  // 重置图表（销毁实例）
  function resetChart() {
    const chartDom = document.getElementById('pie-chart');
    if (chartDom && window.echarts.getInstanceByDom(chartDom)) {
      window.echarts.dispose(chartDom);
    }
  }
  
  // 监听幻灯片切换事件
  reveal.addEventListener('slidechanged', function(event) {
    const currentSlide = event.currentSlide;
    const prevSlide = event.previousSlide;
    
    // 当前幻灯片包含图表则初始化动画
    if (currentSlide.contains(document.getElementById('pie-chart'))) {
      initChart();
    }
    // 上一张幻灯片包含图表则重置
    if (prevSlide && prevSlide.contains(document.getElementById('pie-chart'))) {
      resetChart();
    }
  });
  
  // 页面加载时，若初始显示的是图表页则直接触发动画
  if (reveal.getCurrentSlide().contains(document.getElementById('pie-chart'))) {
    initChart();
  }
});

完整Quarto演示文稿代码 #

---
title: "A Title"
subtitle: "A Subtitle"
author: "First Last"
institute: "Some Institute"
date: today
self-contained: true
format: revealjs
---

Introduction #

Hello There!

Pie Chart #

library(tidyverse)
library(echarts4r)

data <- tibble(name = c("A", "B", "C", "D", "E", "F", "G"),
             number = c(9.7, 2.1, 2.1, 1.9, 1.9, 1.9, 80.4))

data %>% 
e_charts(name, elementId = "pie-chart") %>% 
e_pie(number, radius = c("50%", "70%")) %>% 
e_legend(orient = "vertical", right = "5", top = "65%")

document.addEventListener('DOMContentLoaded', function() {
  const reveal = Reveal.get();
  
  function initChart() {
    const chartDom = document.getElementById('pie-chart');
    if (chartDom) {
      if (window.echarts.getInstanceByDom(chartDom)) {
        window.echarts.dispose(chartDom);
      }
      const myChart = window.echarts.init(chartDom);
      const option = JSON.parse(chartDom.getAttribute('data-option'));
      myChart.setOption(option);
    }
  }
  
  function resetChart() {
    const chartDom = document.getElementById('pie-chart');
    if (chartDom && window.echarts.getInstanceByDom(chartDom)) {
      window.echarts.dispose(chartDom);
    }
  }
  
  reveal.addEventListener('slidechanged', function(event) {
    const currentSlide = event.currentSlide;
    const prevSlide = event.previousSlide;
    
    if (currentSlide.contains(document.getElementById('pie-chart'))) {
      initChart();
    }
    if (prevSlide && prevSlide.contains(document.getElementById('pie-chart'))) {
      resetChart();
    }
  });
  
  if (reveal.getCurrentSlide().contains(document.getElementById('pie-chart'))) {
    initChart();
  }
});

原理说明 #

• echarts4r会将图表配置项存储在DOM元素的data-option属性中，读取该配置重新初始化即可触发默认动画。
• 通过Reveal.js的slidechanged事件实时判断当前幻灯片，控制图表的初始化与销毁，实现动画的触发与重置。
• 页面加载时会检查初始幻灯片，确保首次进入图表页时动画正常生效。

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