Блог

Я пишу небольшой проект по борьбе с covid и пытаюсь отобразить подтвержденные данные о заражении с помощью ApexCharts, но график не отображается. Я ввожу данные из vuex в две таблицы. Данные действительны, однако они поступают из api и sa в прокси-объекте. Что я делаю не так? (Я использую ApexCharts, потому что vue Chartjs несовместим с vue 3).

 <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
 }
}