Vue集成ApexCharts仅窗口resize时才加载渲染数据问题

问题根因 #

这个现象不是ApexCharts独有的bug，ECharts、Chart.js等所有基于Canvas/SVG的前端图表库都会出现同类问题，核心触发原因有两个：

• 图表初始化时，外层承载DOM（你这里是Vuetify的v-col栅格容器）还没完成响应式布局计算，宽高值为0，ApexCharts拿不到有效渲染尺寸，直接生成了0宽高的无效图表；你手动调整窗口大小时会触发库内置的resize重算逻辑，拿到正确容器尺寸后就正常显示了。
• 你的配置里xaxis.categories初始值是空数组，如果图表数据是异步接口获取的，组件首次挂载时拿到的是空数据，后续数据返回时如果没有触发框架的深度更新检测，组件不会自动执行重绘。

可直接落地的修复方式 #

按优先级试，基本前两个就能解决问题：

• 用v-if控制图表挂载时机
  不要在页面刚加载、数据还没返回的时候就挂载图表组件，等series数据和xaxis.categories全部赋值完成后，再渲染组件，避免空数据/无效尺寸初始化：

  <v-col cols="12">
    <!-- isChartDataLoaded默认值为false，数据全部加载完成后置为true -->
    <apexchart
      v-if="isChartDataLoaded"
      type="line"
      height="350"
      :options="chartOptions"
      :series="series"
    ></apexchart>
  </v-col>
  

• 给图表容器设置明确的尺寸约束
  给v-col或者图表外层套一层容器，写死最小高度和宽度，避免栅格布局未完成时容器尺寸为0：

  .chart-container {
    width: 100%;
    min-height: 350px;
  }
  

• 数据加载完成后手动触发重绘
  如果前两步操作后还有偶发异常，直接在数据赋值、DOM更新完成后，手动调用图表实例的重绘/resize方法，和你手动拉窗口触发的逻辑完全一致：
  先给组件加ref绑定：

  <apexchart
    ref="lineChart"
    v-if="isChartDataLoaded"
    type="line"
    height="350"
    :options="chartOptions"
    :series="series"
  ></apexchart>
  

  然后在数据加载完成的逻辑里加调用：

  // 数据赋值完成后执行
  this.$nextTick(() => {
    if (this.$refs.lineChart?.chart) {
      // 二选一即可，resize逻辑更轻量
      this.$refs.lineChart.chart.resize()
      // this.$refs.lineChart.chart.render()
    }
  })
  

• 清理重复配置避免更新检测失效
  你现在在组件props和chartOptions.chart里重复传了height:350、type:"line"，删掉配置里重复的这部分即可，避免重复传值导致框架的更新监听异常。如果是Vue2项目，异步更新chartOptions里的嵌套属性（比如xaxis.categories）时，记得用$set赋值，或者直接整体替换chartOptions对象，避免深度监听不触发。

你提到的2019年未解决的issue本质都是使用方式问题，不属于库本身的代码缺陷，所以官方没有做针对性修复，所有前端图表库遇到初始化容器尺寸异常、空数据初始化的场景都会出现同类表现。

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