本文介绍如何在切换不同时间维度（如最近7天、当月、上月等）时，平滑显示/隐藏包含 apexcharts 的容器，并解决因图表未重绘导致的“再次选择不显示”问题。
在使用 ApexCharts 构建多时段数据看板时，常见的需求是：通过下拉菜单动态切换展示维度（如“最近7天”“当月”“上月”“本年”），并仅显示对应图表容器，其余隐藏。但直接使用 jQuery 的 .show() / .hide() 会导致两个关键问题：
- 无过渡动画，视觉生硬；
- 图表未重新渲染——ApexCharts 实例在 display: none 状态下无法正确计算尺寸，再次 show() 时可能空白或布局错乱。
✅ 正确做法应分三步：
- 统一隐藏所有容器（推荐用 opacity + height + overflow 配合 CSS 过渡）；
- 按需显示目标容器并触发图表重绘；
- 确保每个图表容器拥有独立、可复用的 ApexCharts 实例（避免重复初始化或销毁后未重建）。
以下是完整实践方案：
✅ 推荐结构（HTML + CSS + JS）
<!-- 下拉选择器 --> <select id="duration" class="form-control"> <option value="7days">最近7天</option> <option value="currentmonth">当月</option> <option value="lastmonth">上月</option> <option value="currentyear">本年</option> </select> <!-- 图表容器（全部初始可见，由JS控制状态） --> <div class="chart-container" id="chart-7days"></div> <div class="chart-container" id="chart-currentmonth"></div> <div class="chart-container" id="chart-lastmonth"></div> <div class="chart-container" id="chart-currentyear"></div>
/* 平滑过渡动画 */
.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 实例在可见时始终处于正确渲染状态——彻底解决“第二次选择不显示”的核心痛点。
