在使用 ApexCharts 时，如果使用 visibility: hidden 或 display: none 隐藏图表元素，可能会导致图表无法正常渲染。这是因为 ApexCharts 需要在可见的 DOM 元素上进行渲染。

解决方法是将图表容器隐藏，而不是直接隐藏图表元素本身。可以通过设置容器的高度为 0 或使用其他方式隐藏容器。

以下是一个示例代码，演示如何使用 opacity 属性隐藏图表容器：

HTML：

显示图表

JavaScript：

function showChart() {
  // 显示图表容器
  document.getElementById("chartContainer").style.opacity = 1;

  // 创建图表实例
  var options = {
    chart: {
      type: 'line'
    },
    series: [{
      name: 'Series 1',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }],
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    }
  }

  var chart = new ApexCharts(document.querySelector("#chartContainer"), options);

  // 渲染图表
  chart.render();
}

在上面的示例中，图表容器的初始样式设置为 opacity: 0; height: 0;，这将隐藏图表容器。当点击按钮时，调用 showChart() 函数将图表容器的样式修改为 opacity: 1;，这将显示图表容器。然后，创建并渲染图表实例。

这样，即使图表容器一开始是隐藏的，一旦显示，图表就可以正常渲染。