Vue3 Composition API下ApexChart chartOptions无法响应式更新求助

问题根源：vue3-apexcharts组件默认仅自动监听series的响应式变化，对于options的深层属性修改，组件不会主动触发图表重绘——即便Vue的响应式系统已经更新了chartOptions的值，ApexCharts实例也需要主动调用更新方法才能应用新配置。

方案一：通过组件引用手动调用updateOptions #

这是最直接有效的方式，获取图表组件实例后，主动调用ApexCharts的更新方法：

<script setup>
import { reactive, ref } from "vue"
import VueApexCharts from "vue3-apexcharts"

const chartOptions = reactive({
  chart: {
    type: 'candlestick',
    height: 350
  },
  title: {
    text: 'CandleStick Chart Title That Doesnt Update',
    align: 'left'
  },
  xaxis: {
    type: 'datetime'
  },
  yaxis: {
    tooltip: {
      enabled: true
    }
  }
})

const series = reactive([{
  data: [
    { x: new Date(1538778600000), y: [6629.81, 6650.5, 6623.04, 6633.33] },
    { x: new Date(1538780400000), y: [6632.01, 6643.59, 6620, 6630.11] },
    { x: new Date(1538782200000), y: [6630.71, 6648.95, 6623.34, 6635.65] },
    { x: new Date(1538784000000), y: [6635.65, 6651, 6629.67, 6638.24] },
    { x: new Date(1538785800000), y: [6638.24, 6640, 6620, 6624.47] },
  ]
}])

// 获取图表组件的引用
const chartRef = ref(null)

function updateChartOptions(){
  chartOptions.title.text = "New Updated Title " + Date.now()
  // 主动调用图表更新方法
  if(chartRef.value){
    chartRef.value.updateOptions(chartOptions)
  }
}
</script>

<template>
  <div class="example">
    <VueApexCharts ref="chartRef" width="500" height="350" type="candlestick" :options="chartOptions" :series="series"></VueApexCharts>
    <button v-on:click="updateChartOptions" class="btn btn-primary my-3">Click to Update Chart Options</button>
    <div>{{ chartOptions }}</div>
  </div>
</template>

方案二：替换整个chartOptions引用触发响应式（配合ref） #

如果不想手动调用方法，可以把chartOptions改为ref包裹的对象，更新时直接替换整个对象，让组件感知到引用变化：

<script setup>
import { ref } from "vue"
import VueApexCharts from "vue3-apexcharts"

// 用ref包裹整个配置对象
const chartOptions = ref({
  chart: {
    type: 'candlestick',
    height: 350
  },
  title: {
    text: 'CandleStick Chart Title That Doesnt Update',
    align: 'left'
  },
  xaxis: {
    type: 'datetime'
  },
  yaxis: {
    tooltip: {
      enabled: true
    }
  }
})

const series = ref([{
  data: [
    { x: new Date(1538778600000), y: [6629.81, 6650.5, 6623.04, 6633.33] },
    { x: new Date(1538780400000), y: [6632.01, 6643.59, 6620, 6630.11] },
    { x: new Date(1538782200000), y: [6630.71, 6648.95, 6623.34, 6635.65] },
    { x: new Date(1538784000000), y: [6635.65, 6651, 6629.67, 6638.24] },
    { x: new Date(1538785800000), y: [6638.24, 6640, 6620, 6624.47] },
  ]
}])

function updateChartOptions(){
  // 替换整个ref对象，触发组件重绘
  chartOptions.value = {
    ...chartOptions.value,
    title: { text: "New Updated Title " + Date.now() }
  }
}
</script>

<template>
  <div class="example">
    <VueApexCharts width="500" height="350" type="candlestick" :options="chartOptions" :series="series"></VueApexCharts>
    <button v-on:click="updateChartOptions" class="btn btn-primary my-3">Click to Update Chart Options</button>
    <div>{{ chartOptions }}</div>
  </div>
</template>

方案对比 #

• 方案一更灵活，适合仅更新部分配置的场景，无需替换整个对象
• 方案二更贴合Vue响应式常规写法，但每次更新都要创建新对象，适合配置变更较少的场景

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