typescript - 顶点图表 x 轴标签未更新

Question

嗨，我正在用 Vue 3 和打字稿做 Apexchart。但是除了轴标签之外的数据没有更新。

在设置时，我声明了 series 和 chartOptions 反应式。我将系列数据设置为数组。它chartoptions xaxis类别。我从商店查看 dateRange 的值。并在更新时调用 fetchData 方法。和 fetData() 方法。在我的模板中

<apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>


const fetchData = (dateInput: any) => {
        let invoiceChartResponse = useRequest<InvoiceChart[]>(`invoice/chart?input=` + JSON.stringify(dateInput.value))  
        watch(
            () => invoiceChartResponse,
            (invoiceChartResponse, prevState) => {
                console.log(invoiceChartResponse, "invoiceChartResponse")
                if(invoiceChartResponse.data && objectHasProperty(invoiceChartResponse.data[0], 'new_date')){
                    let groupData = groupBy(invoiceChartResponse.data, 'new_date')
                    let keys = Object.keys(groupData)
                    if(keys.length > 0){ 
                        keys.forEach(key => { 
                                series[0].data.push(groupData[key].length);  
                            if(! chartOptions.xaxis.categories.includes(key)){
                                chartOptions.xaxis.categories.push(key);
                            } 
                        })
                    }
                }
                else{
                    chartOptions.xaxis.categories = []
                    series[0].data = []
                }
            },
            { 
                immediate: true, 
                deep: true
            }
        )
        
    }

const dateRange = computed(() => $store.getters['application/date_range'])
watch(
            () => dateRange,
            (dateRange, prevState) => {
                fetchData(dateRange)
            },
            { 
                immediate: true, 
                deep: true
            }
        )

...

setup() {

  const series = reactive([{
      name: 'Invoice',
      data: Array()
  }])

  const chartOptions = reactive({
      chart: {
          id: 'chart1',
      },
      xaxis: {
          categories: [''],
          position: 'top',
      },

  })

    return {
        series,
        chartOptions,            
    }
},

然后，我从商店获得价值

const dateRange = computed(() => $store.getters['application/date_range'])

如下图所示。轴标签是“2021 年 8 月”。应该是 2021 年 7 月

标签： typescriptvuejs3