使用Vue使用来自api的数据填充Apexchart

Question

我一直试图用我的API中的数据填充我的Apexchart，但它没有用任何数据填充图表。我不太确定自己缺少什么，但没有呈现任何内容。

barChart.vue：

<template>
  <div class="barChart">
    <apexcharts width="500" height="350" type="bar" :options="options" :series="series"></apexcharts>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  name: 'Chart',
  components: {
    apexcharts: VueApexCharts,
  },
  data: function() {
    return {
      chartOptions: {
        chart: {
          id: 'basic-bar'
        },
        xaxis: {
          categories: []
        }
      },
      series: [{
        name: 'series-1',
        data: []
      }]
    }
  },

}
</script>

查看：

<template>
<vx-card>
         <Chart />
</vx-card>
</template>
<script>
import Chart from '@/components/charts/barChart.vue'
import axios from 'axios'

export default {
  components: {
    Chart
  },
  data: function() {
    return {
      options: {},
      series: []
    }
  },

   mounted () {
     var url = 'http://localhost/api/network/countries';
   axios({
  method: 'GET',
  url: url,
}).then(function(response) {
    let apiResponse = response.data
let countries = apiResponse.map(x => x[0])
let count = apiResponse.map(x => x[1])
console.log(countries)
console.log(count)
  this.data = [{
    series: count,
    options: countries
    }]
})
 }

}
</script>

如果需要重现，这里是所有数据：https://pastebin.com/xaSM3LcE

以下是来自Chrome开发者控制台的回溯：