缩放.container时如何阻止内部#chart元素跟随缩放

方案1：反向缩放抵消（改动最小，推荐优先使用） #

核心原理：父容器的transform: scale可以通过子元素设置反向比例的scale完全抵消，视觉上子元素无缩放效果，且不影响ApexCharts本身的响应式逻辑。

新增CSS样式 #

#chart {
  /* 抵消父容器的缩放系数，父容器实际缩放值为var(--scale-value)*0.9，因此反向缩放为1/该值 */
  transform: scale(calc(1 / (var(--scale-value) * 0.9)));
  transform-origin: center;
  /* 按需调整宽高，保证占满可用空间 */
  width: 100%;
  height: 400px;
}

可选优化（解决偶发图表尺寸异常） #

如果出现图表渲染错位，可在窗口resize逻辑后追加图表重绘逻辑，示例如下：

// 假设你的ApexCharts实例存储在chartInstance变量中
const resizeWindow = () => {
   const {innerWidth: width, innerHeight: height} = window;
   let scale;
   if(width < 768) {
      scale = height/PANEL_HEIGHT;
   } else {
      scale = Math.min(width/PANEL_WIDTH, height/PANEL_HEIGHT);
   }
   document.documentElement.style.setProperty(SCALE_PROPERTY, scale);
   // 触发图表重绘，适配当前容器尺寸
   if (window.chartInstance) {
     window.chartInstance.updateOptions({});
   }
}

方案2：DOM结构拆分（适合反向缩放出现布局偏移的场景） #

如果反向缩放导致图表位置偏移难以调整，可直接将图表节点移出需要缩放的父容器，通过绝对定位匹配原有位置，完全隔离缩放影响：

修改HTML结构 #

<div class="container">
  <!-- 其他需要跟随缩放的内容 -->
</div>
<!-- 图表移到容器外部，不受容器缩放影响 -->
<div id="chart"></div>

新增CSS样式 #

#chart {
  position: absolute;
  /* 调整以下属性匹配图表原本在container中的位置和尺寸 */
  top: 120px;
  left: 80px;
  width: calc(1600px * var(--scale-value) * 0.9 - 160px);
  height: 400px;
  z-index: 10;
}

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