如何为 ApexCharts 容器实现带动画的显隐切换效果_技术教程

本文介绍如何在切换不同时间维度（如最近7天、当月、上月等）时，平滑显示/隐藏包含 apexcharts 的容器，并解决因图表未重绘导致的“再次选择不显示”问题。

在使用 ApexCharts 构建多时段数据看板时，常见的需求是：通过下拉菜单动态切换展示维度（如“最近7天”“当月”“上月”“本年”），并仅显示对应图表容器，其余隐藏。但直接使用 jQuery 的 .show() / .hide() 会导致两个关键问题：

无过渡动画，视觉生硬；
图表未重新渲染——ApexCharts 实例在 display: none 状态下无法正确计算尺寸，再次 show() 时可能空白或布局错乱。

✅ 正确做法应分三步：

统一隐藏所有容器（推荐用 opacity + height + overflow 配合 CSS 过渡）；
按需显示目标容器并触发图表重绘；
确保每个图表容器拥有独立、可复用的 ApexCharts 实例（避免重复初始化或销毁后未重建）。

以下是完整实践方案：

✅ 推荐结构（HTML + CSS + JS）

/* 平滑过渡动画 */
.chart-container {
  opacity: 1;
  max-height: 1000px;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}
.chart-container.hidden {
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
}

// 1. 初始化所有图表（全局变量或 Map 存储）
const charts = {};

function initChart(id, options) {
  if (charts[id]) charts[id].destroy(); // 清理旧实例
  charts[id] = new ApexCharts(document.querySelector(`#${id}`), options);
  charts[id].render();
}

// 示例配置（可根据实际数据替换）
const baseOptions = { chart: { type: 'line', height: 350 }, series: [], xaxis: { categories: [] } };

initChart('chart-7days', { ...baseOptions, title: { text: '最近7天销量' } });
initChart('chart-currentmonth', { ...baseOptions, title: { text: '当月销量' } });
initChart('chart-lastmonth', { ...baseOptions, title: { text: '上月销量' } });
initChart('chart-currentyear', { ...baseOptions, title: { text: '本年销量' } });

// 2. 切换逻辑（带动画 + 图表激活）
function showChartForDuration(duration) {
  // 隐藏全部
  document.querySelectorAll('.chart-container').forEach(el => el.classList.add('hidden'));

  // 显示目标容器
  const targetEl = document.getElementById(`chart-${duration}`);
  if (targetEl) {
    targetEl.classList.remove('hidden');

    // 强制重绘：延迟 1 帧确保 DOM 更新后再刷新图表（关键！）
    setTimeout(() => {
      if (charts[`chart-${duration}`]) {
        charts[`chart-${duration}`].updateOptions({}); // 触发重绘
      }
    }, 10);
  }
}

// 3. 绑定事件
document.getElementById('duration').addEventListener('change', function() {
  showChartForDuration(this.value);
});

// 首次加载默认显示
showChartForDuration('7days');

⚠️ 注意事项

切勿复用同一 DOM 节点多次初始化图表：每次切换前必须调用 .destroy()，否则内存泄漏且渲染异常；
避免 display: none 直接隐藏：它会使 ApexCharts 无法获取容器宽高，导致 updateOptions() 失效；使用 opacity + max-height 更安全；
动态数据更新：若各图表数据源不同，应在 showChartForDuration() 中同步请求并调用 chart.updateSeries()；
响应式增强：可在 window.addEventListener('resize') 中为当前可见图表调用 .updateOptions({}) 以适配尺寸变化。

通过该方案，你不仅能获得流畅的淡入/淡出动画，更能确保每个 ApexCharts 实例在可见时始终处于正确渲染状态——彻底解决“第二次选择不显示”的核心痛点。