Vue3 setup语法下ApexCharts模板Ref绑定失败，调用dataURI报错

问题原因 #

你遇到的报错源于两个核心问题：

1. <apexchart>组件的模板Ref指向的是Vue组件实例，而非底层的ApexCharts核心实例，直接调用dataURI()会找不到对应方法。
2. onMounted仅保证组件挂载到DOM，但图表可能还在异步初始化流程中，此时实例尚未就绪。

解决方案 #

1. 最优方案：监听图表加载完成事件

利用组件的@loaded事件是最可靠的方式，该事件会在图表完全初始化后触发，并直接传入ApexCharts实例。

<script setup lang="ts">
import { ref } from 'vue';
import ApexChart from 'vue3-apexcharts';
import type ApexCharts from 'apexcharts';

const chartRef = ref<InstanceType<typeof ApexChart> | null>(null);

const handleChartLoaded = async (chartInstance: ApexCharts) => {
  try {
    const { imgURI, blob } = await chartInstance.dataURI();
    console.log('生成的图片URI:', imgURI);
    // 此处可处理blob或imgURI，比如实现图片下载等逻辑
  } catch (error) {
    console.error('生成dataURI失败:', error);
  }
};
</script>

<template>
  <div>
    <div id="chart">
      <apexchart 
        ref="chartRef" 
        :options="options" 
        :series="series" 
        type="polarArea" 
        :size="200"
        @loaded="handleChartLoaded"
      />
    </div>
  </div>
</template>

2. 备选方案：onMounted配合nextTick

如果不想使用loaded事件，可通过nextTick等待DOM更新完成后再获取实例，但可靠性略低于事件监听方式：

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import ApexChart from 'vue3-apexcharts';
import type ApexCharts from 'apexcharts';

const chartRef = ref<InstanceType<typeof ApexChart> | null>(null);

onMounted(async () => {
  await nextTick();
  if (chartRef.value?.chart) {
    try {
      const { imgURI, blob } = await chartRef.value.chart.dataURI();
      console.log(imgURI);
    } catch (error) {
      console.error(error);
    }
  }
});
</script>

<template>
  <div>
    <div id="chart">
      <apexchart 
        ref="chartRef" 
        :options="options" 
        :series="series" 
        type="polarArea" 
        :size="200"
      />
    </div>
  </div>
</template>

关键说明 #

• 确保你安装并使用的是vue3-apexcharts（Vue3专属的封装组件），而非直接仅引入apexcharts核心库。
• 无论哪种方案，都需要等待图表实例完全初始化后再调用dataURI()，避免实例为null的报错。

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