如何实现ECharts图表全屏放大功能？

Question

在使用 ECharts 实现图表全屏放大功能时，常见的技术问题是：如何在不丢失图表交互功能的前提下，实现点击按钮或双击事件触发全屏模式，并兼容不同浏览器的全屏 API 差异？开发者通常会遇到图表容器尺寸自适应、分辨率变化后重绘异常、全屏状态下 tooltip 和图例显示错位等问题。此外，如何优雅地退出全屏并恢复原图表状态，也是实现过程中需要重点考虑的环节。

Answer 1

一、实现 ECharts 图表全屏放大功能的背景与挑战

在现代数据可视化项目中，ECharts 作为主流的前端图表库，广泛应用于各类数据展示场景。全屏放大功能是提升用户体验的重要交互之一。然而，在实现过程中，开发者常常面临以下挑战：

• 如何在不丢失图表交互功能的前提下实现全屏切换
• 兼容不同浏览器的 Fullscreen API 差异（如 requestFullscreen、webkitRequestFullscreen、mozRequestFullScreen）
• 图表容器在全屏状态下尺寸自适应问题
• 分辨率变化后图表重绘异常
• 全屏状态下 tooltip 和图例显示错位或丢失
• 如何优雅地退出全屏并恢复图表状态

二、实现全屏功能的基本流程

实现 ECharts 图表全屏功能的核心流程包括以下几个步骤：

1. 绑定触发事件（如点击按钮或双击图表）
2. 调用浏览器的 Fullscreen API 进入全屏模式
3. 调整图表容器尺寸以适应全屏视图
4. 监听窗口大小变化事件，重绘图表
5. 退出全屏时恢复原始状态

三、兼容浏览器的 Fullscreen API 实现

由于浏览器厂商对 Fullscreen API 的实现存在差异，需封装兼容性处理函数。

function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}
  

四、图表容器尺寸自适应与重绘问题处理

进入全屏后，图表容器的尺寸会发生变化，需要手动触发 ECharts 实例的 resize 方法。

const chart = echarts.init(document.getElementById('chart'));

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    chart.resize();
  } else {
    chart.resize();
  }
});
  

为防止窗口缩放时频繁触发 resize，可使用防抖函数优化性能：

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  if (chart) chart.resize();
}, 200));
  

五、全屏状态下 tooltip 和图例显示异常问题

在某些浏览器中，全屏模式下 tooltip 或图例可能显示错位或消失，主要原因如下：

• tooltip 的定位依赖于容器坐标，全屏后容器位置变化
• 图例元素未随容器尺寸变化重新计算布局

解决方案：

1. 使用 echartsInstance.setOption 在全屏切换时动态调整 tooltip 和 legend 配置
2. 在 resize 时调用 echartsInstance.resize() 强制重绘

六、优雅退出全屏并恢复原图表状态

退出全屏时需确保图表恢复到原始尺寸和状态，包括：

• 恢复图表容器原始大小
• 重新计算图表布局
• 保持原有数据和交互状态

let originalWidth, originalHeight;

function enterFullscreenMode() {
  const container = document.getElementById('chart');
  originalWidth = container.offsetWidth;
  originalHeight = container.offsetHeight;
  // 进入全屏逻辑...
}

function exitFullscreenMode() {
  const container = document.getElementById('chart');
  container.style.width = originalWidth + 'px';
  container.style.height = originalHeight + 'px';
  chart.resize();
}
  

七、全屏功能实现流程图

graph TD
      A[用户触发全屏事件] --> B{判断是否支持全屏API}
      B -- 是 --> C[调用对应浏览器的全屏方法]
      B -- 否 --> D[提示不支持全屏]
      C --> E[监听全屏变化事件]
      E --> F[调整图表容器尺寸]
      F --> G[调用resize方法重绘图表]
      H[用户退出全屏] --> I[恢复原始容器尺寸]
      I --> J[再次调用resize方法]