vue3의 VueApexCharts 라이브러리에서 데이터와 함께 어레이를 차트에 올바르게 전달하는 방법

vue3의 VueApexCharts 라이브러리에서 데이터와 함께 어레이를 차트에 올바르게 전달하는 방법

저는 작은 covid 프로젝트를 작성하고 Apex Charts를 사용하여 확인된 감염 데이터를 플롯하려고 합니다만, 그래프가 표시되지 않습니다.vuex의 데이터를 두 개의 테이블에 입력합니다.데이터는 유효하지만 프록시 개체의 api 및 sa에서 가져옵니다.무엇이 잘못되었습니까? (vue Chartjs는 vue 3과 호환되지 않기 때문에 Apex Charts를 사용하고 있습니다.)

<template>
  <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
</template>

<script>
import VueApexCharts from "vue3-apexcharts";

export default {
  components: {
    apexchart: VueApexCharts,
  },
 data(){  
   return {
     series: [],
      options: {
        chart: {
          type: "bar",
          height: 400,
          stacked: true
        },
        plotOptions: {
          bar: {
            horizontal: false
          }
        },
        dataLabels: {
          enabled: false
        },
        tooltip: {
          shared: true,
          followCursor: true
        },
        stroke: {
          width: 1,
          colors: ["#fff"]
        },
        fill: {
          opacity: 1
        },
        legend: {
          position: "top",
          horizontalAlign: "center",
          offsetX: 40
        },
        colors: ["rgb(95, 193, 215)", "rgb(226, 37, 43)", "rgb(94, 181, 89)"]
      }
    };
 },
 computed: {
   getDate(){
     return this.$store.getters['chart/getDate'];
   },
   getConfirmed(){
    return this.$store.getters['chart/getConfirmed'];
   }
 },
   methods: {
    fillDate(){
       this.options = {
         xaxis: {
           categories: this.getDate
         }
       }
        this.series = [
         {
           name: 'Confirmed',
           data: this.getConfirmed
         }
       ];
     }
   },
  async mounted() {
    await this.fillDate();
  }
}

vuex 저장소의 데이터는 두 개의 어레이입니다.

Proxy
[[Handler]]: Object
[[Target]]: Array(45)
[[IsRevoked]]: false

마운트된 후크와 메서드를 사용하는 대신 계산된 속성을 확인한 후 해당 속성을 기반으로 데이터를 업데이트하십시오.

 computed: {
   getDate(){
     return this.$store.getters['chart/getDate'];
   },
   getConfirmed(){
    return this.$store.getters['chart/getConfirmed'];
   }
 },
watch:{
   getDate:{
  handler(newVal){
    this.options = {
         xaxis: {
           categories: this.getDate
         }
       },
   deep:true
    },
 getConfirmed:{
   handler(newVal){
    this.series = [
         {
           name: 'Confirmed',
           data: this.getConfirmed
         }
       ];
 },
  deep:true
 }
}

언급URL : https://stackoverflow.com/questions/65133256/how-to-correctly-pass-array-with-data-to-a-chart-from-the-vueapexcharts-library