Vue中如何在批量ApexCharts更新前显示SVG加载动画？

一、解决加载动画无法显示的问题 #

问题根源是JavaScript单线程特性：设置showSpinner = true后，同步执行的图表更新会阻塞主线程，浏览器没有时间渲染SVG动画，直到所有图表更新完成才会处理DOM渲染队列。

解决方法是把图表更新逻辑放到宏任务队列中，让浏览器先完成加载动画的渲染，再执行耗时的图表更新：

const updateAllCharts = () => {
  showSpinner.value = true
  // 用setTimeout延迟执行图表更新，给浏览器留足渲染动画的时间
  setTimeout(() => {
    // 这里执行你的图表数据更新或实例更新逻辑
    updateChartData()
    refreshAllCharts()
  }, 0)
}

二、监听所有图表更新完成的回调 #

ApexCharts提供了updated事件，会在单个图表更新完成后触发。我们可以给每个图表实例绑定该事件，通过计数器判断所有图表是否都更新完成：

1. 模板中给图表绑定ref集合 #

<apexchart 
  v-for="(item, index) in chartList" 
  :key="index" 
  :options="item.options" 
  :series="item.series" 
  ref="chartRefs"
/>

2. 初始化时绑定更新事件 #

在组件挂载完成后，遍历所有图表实例，绑定updated事件：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const showSpinner = ref(false)
    const chartRefs = ref([])
    let completedCount = 0 // 记录已完成更新的图表数量

    onMounted(() => {
      // 给每个图表实例绑定updated事件
      chartRefs.value.forEach(chartEl => {
        const chartInstance = chartEl.chart
        chartInstance.options.events = {
          ...chartInstance.options.events,
          updated: () => {
            completedCount++
            // 所有图表都更新完成后关闭加载动画
            if (completedCount === chartRefs.value.length) {
              showSpinner.value = false
              completedCount = 0 // 重置计数器，为下次更新做准备
            }
          }
        }
      })
    })

    // 批量更新图表的方法
    const updateAllCharts = () => {
      showSpinner.value = true
      completedCount = 0 // 更新前重置计数器
      setTimeout(() => {
        // 模拟耗时的数据更新逻辑
        chartList.value = generateNewChartData()
        // 若数据更新后图表未自动刷新，可手动调用update方法
        chartRefs.value.forEach((chartEl, index) => {
          chartEl.chart.updateOptions(chartList.value[index].options)
          chartEl.chart.updateSeries(chartList.value[index].series)
        })
      }, 0)
    }

    return { showSpinner, chartRefs, updateAllCharts }
  }
}

关键说明 #

• 计数器必须在每次触发更新前重置，避免上次的计数影响本次判断
• 如果你的图表数据更新后会自动触发渲染（比如通过响应式数据驱动），可以省略手动调用updateOptions和updateSeries的步骤
• 若使用Vue2，只需将setup语法替换为data和methods，ref的获取方式改为this.$refs.chartRefs

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