Electron-Angular项目初始非可视区域图表鼠标事件无法触发

Electron搭配Angular开发的页面中顺序排列4张图表，组件加载完成后首屏仅展示前2张，剩余图表需要向下滚动才能看到。所有图表统一配置了hover提示、图例、缩放、平移交互：

• 首屏直接可见的2张图表所有功能正常，hover、缩放、平移均能正常响应
• 初始加载时不在可视区域的下方图表，缩放、平移、hover效果全部失效

所有主流前端图表库（ECharts、Chart.js等）初始化时，都会读取挂载DOM容器的实际尺寸，计算鼠标事件的坐标映射规则、canvas/svg的渲染视口参数。如果初始化时容器不在可视区域、尺寸计算为0，库内部保存的这些基础参数就是错误的。后续容器滚动到可视区域后，这些初始化时生成的参数不会自动更新，直接导致所有依赖坐标计算的交互全部失效。
Electron基于Chromium内核，对非视口区域的元素有渲染节流策略，比普通浏览器环境更容易触发这个问题。

按优先级从高到低验证即可：

• 非首屏图表延迟到进入视口再初始化
  不要在ngOnInit阶段一次性初始化所有图表，用IntersectionObserver监听每个图表的容器元素，只有当容器进入（或即将进入）可视区域时再执行对应图表的初始化逻辑，Angular中参考实现：

  ngAfterViewInit(): void {
    // 获取所有图表容器
    const chartContainers = this.eleRef.nativeElement.querySelectorAll('.chart-item');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 根据容器标识初始化对应图表
          this.renderChartByContainer(entry.target as HTMLElement);
          // 初始化完成后取消监听，避免重复触发
          observer.unobserve(entry.target);
        }
      });
    }, { rootMargin: '200px 0' }); // 提前200px预加载，避免滚动到位置才加载出现闪屏
  
    chartContainers.forEach(container => observer.observe(container));
  }
  

• 已初始化的图表进入视口时手动触发resize
  如果业务要求必须提前初始化所有图表，就监听页面滚动事件，判断图表容器进入可视区域时，手动调用图表实例的resize()方法，强制库重新计算容器尺寸和坐标映射，以ECharts为例：

  @HostListener('window:scroll')
  onPageScroll() {
    this.echartsInstances.forEach(instance => {
      const dom = instance.getDom();
      const domRect = dom.getBoundingClientRect();
      // 判断容器是否处于可视区域内
      const isInView = domRect.top < window.innerHeight && domRect.bottom > 0;
      if (isInView) {
        instance.resize();
      }
    });
  }
  

• 排查容器样式问题
  确认图表容器没有被设置pointer-events: none，外层父容器不要用overflow: hidden截断图表的事件响应区域，每个图表容器要设置明确的宽高值，不要靠内容自动撑开高度。如果用了*ngIf控制图表显隐，要注意条件切换后要重新执行图表初始化或resize。

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