ECharts 在 Chrome 125 版本中的 Canvas 渲染问题分析与解决方案

问题现象

近期，部分开发者在使用 ECharts 图表库时发现了一个奇怪的现象：当在 Chrome 浏览器（版本 125.0.6422.61）中切换浏览器标签页时，使用 Canvas 渲染的 ECharts 图表会出现无法正常显示的问题。具体表现为：

1. 在多标签页环境中切换标签时，部分页面的 ECharts 图表会消失
2. 需要鼠标移动或交互操作后，图表才会重新显示
3. 该问题在 Chrome 124.0.6367.92 及以下版本不会出现
4. 问题主要影响 Canvas 渲染模式，SVG 渲染模式不受影响

技术背景

ECharts 作为一款强大的数据可视化库，支持两种渲染方式：Canvas 和 SVG。Canvas 是基于位图的渲染技术，而 SVG 是基于矢量图形的渲染技术。在性能方面，Canvas 通常更适合大数据量的场景，而 SVG 则在交互性和可访问性方面更有优势。

Chrome 浏览器在 125 版本中引入了一个与 Canvas 渲染相关的 bug，这个 bug 影响了页面可见性状态切换时的 Canvas 重绘机制。当用户切换浏览器标签页时，浏览器会触发 visibilitychange 事件，但在这个版本中，Canvas 的渲染上下文没有正确处理这个状态变化。

问题根源

经过技术分析，这个问题实际上是 Chrome 浏览器自身的一个 bug，而非 ECharts 库的问题。具体表现为：

1. 当页面从隐藏状态变为可见状态时，Canvas 的渲染上下文没有自动触发重绘
2. 浏览器没有正确处理 Canvas 的恢复逻辑
3. 该问题在 Chrome 125 版本中首次出现，在 124 及以下版本中不存在
4. Chrome 127 金丝雀版本已经修复了这个问题

解决方案

对于受影响的用户，我们提供以下几种解决方案：

1. 临时解决方案

对于必须使用 Canvas 渲染且无法升级浏览器的场景，可以手动触发 Canvas 重绘：

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    const canvas = document.querySelector("canvas");
    if (canvas) {
      const context = canvas.getContext("2d");
      context.fillStyle = "transparent";
      context.fillRect(0, 0, 1, 1);
    }
  }
});

这段代码会在页面变为可见状态时，在 Canvas 上绘制一个透明的 1x1 像素矩形，强制触发重绘。

2. 推荐解决方案

1. 切换为 SVG 渲染模式：在 ECharts 初始化时配置 renderer: 'svg'，SVG 渲染不受此问题影响
2. 升级 Chrome 浏览器：等待 Chrome 官方发布修复版本（127 及以上）
3. 使用 ECharts 的 resize 方法：在 visibilitychange 事件中调用 chart.resize()

最佳实践建议

1. 对于新项目，可以考虑优先使用 SVG 渲染模式，除非有明确的性能需求
2. 在开发过程中，应该测试不同浏览器版本下的表现
3. 对于关键业务场景，建议实现降级方案，如检测到 Chrome 125 版本时自动切换为 SVG 渲染
4. 保持对浏览器更新日志的关注，及时了解已知问题的修复情况

总结

这次事件提醒我们，作为前端开发者，需要：

1. 理解底层技术原理（如 Canvas 和 SVG 的区别）
2. 关注浏览器更新可能带来的兼容性问题
3. 为关键功能实现降级方案
4. 建立完善的浏览器兼容性测试流程

虽然这是一个浏览器层面的 bug，但通过合理的技术选型和应对策略，我们可以最大程度地减少对用户体验的影响。ECharts 团队也会持续关注此类问题，为开发者提供更稳定的数据可视化解决方案。