Vue Apexcharts datapointIndex未定义？

如何解决Vue Apexcharts datapointIndex未定义？

我对apexcharts有点陌生，我有一个示例正在研究中。.我正在尝试扩展。它具有一个自定义功能，当您将鼠标悬停在该行上时可以显示日期，这对于数据系列中的前6个条目可以按预期进行，但是随着我输入的条目和日期越来越多，它可以代替自定义功能来显示日期，为空，当我进入控制台时，它显示dataPointIndex为未定义，而不是我想象的应该是某个索引号，例如该系列中的前5个。有什么想法吗？

      <apexchart
        type="area"
        height="120"
        :options="chartOptions"
        :series="test"
      ></apexchart>
    </div>
  </v-card>
</template>

<script>
import moment from 'moment'
import VueApexCharts from 'vue-apexcharts'
import TrendPercent from '../common/TrendPercent'

function formatDate(date) {
  return date ? moment(date).format('D MMM') : ''
}


export default {
  components: {
    TrendPercent
  },data() {
    return {
      test: [{ data: [1810,3155,4000,2500,1882,2360,1500,8000,1690],name: 'Test' }]
    }
  },props: {
    value: {
      type: Number,default: 0
    },percentage: {
      type: Number,percentageLabel: {
      type: String,default: 'vs. last week'
    },series: {
      type: Array,default: () => [{
        name: 'Sales',data: [1810,1690]
      }]
    },xaxis: {
      type: Object,default: () => ({
        type: 'datetime',categories: [
          '2020-09-10T00:00:00.000Z',// The first 5 work,then stop
          '2020-09-12T00:00:00.000Z','2020-09-20T00:00:00.000Z','2020-09-22T00:00:00.000Z','2020-09-25T00:00:00.000Z','2020-09-27T00:00:00.000Z','2020-09-29T00:00:00.000Z','2020-09-30T00:00:00.000Z'
        ]
      })
    },label: {
      type: String,default: 'dashboard.sales'
    },actionLabel: {
      type: String,default: 'View Reports'
    },options: {
      type: Object,default: () => ({})
    },loading: {
      type: Boolean,default: false
    }
  },computed: {
    chartOptions() {
      const primaryColor = this.$vuetify.theme.isDark
        ? this.$vuetify.theme.themes.dark.primary
        : this.$vuetify.theme.themes.light.primary

      return {
        chart: {
          height: 120,type: 'area',sparkline: {
            enabled: true
          },animations: {
            speed: 400
          }
        },colors: [primaryColor],fill: {
          type: 'solid',opacity: 0.15
        },stroke: {
          curve: 'smooth',width: 20
        },xaxis: this.xaxis,tooltip: {
          followCursor: true,theme: 'dark',custom: function({ ctx,series,seriesIndex,dataPointIndex,w }) {
            const seriesName = w.config.series[seriesIndex].name

            console.log(dataPointIndex)
            console.log(w.globals.labels[dataPointIndex])

            return `<div class="rounded-lg pa-1 caption">
              <div class="font-weight-bold">${formatDate(w.globals.labels[dataPointIndex])}</div>
              <div>${series[seriesIndex][dataPointIndex]} ${seriesName}</div>
            </div>`
          }
        },...this.options
      }
    }
  }
}
</script>