vuechartJs 使标签动态化

如何解决vuechartJs 使标签动态化

我正在尝试使用 vue 图表制作饼图，我正在尝试将对象转换为数组以更新 vuechartjs 中的 de 标签并根据 api 使其动态，但这似乎几乎是不可能的。我的目标是获取标签中的音乐会名称，然后获取（数据）我们为每场音乐会预订的数量。有人会愿意帮忙吗？我已经尝试了一切。谢谢这是我的代码：

  <script>
 import { Pie } from 'vue-chartjs'

export default {
extends: Pie,data () {
  return {
    bandNames:[],booking:[],bandName:[],data:[],chartData: {
      labels:[],datasets: [{
          borderWidth: 1,borderColor: [
          'rgba(255,99,132,1)','rgba(54,162,235,'rgba(255,206,86,'rgba(75,192,1)'            
          ],backgroundColor: [
          'rgba(255,0.2)',],data: [1000]
        }]
    },options: {
      legend: {
        display: true
      },responsive: true,maintainAspectRatio: false
    }
  }
},created(){
     var vm = this;
  this.axios
    .get('http://localhost:3000/booking',{})

    .then(function (response) {
    
      console.log(response.data);
      vm.booking = response.data;
    });

    this.axios
    .get('http://localhost:3000/concerts',{})

    .then(function (response) {
     
      console.log(response.data);
      vm.bandNames = response.data;

      vm.bandNames.forEach((item)=>{
        vm.bandName.push(item.band)
      })

      vm.chartData.labels = vm.bandName[0]
      var data = []
      var i = vm.bandName.length
     for(var a = 0 ; a < i ; a++){
       data.push([vm.bandName[a]])
       vm.chartData.labels = data

     }
      
      
    });
},mounted () {
  this.renderChart(this.chartData,this.options)
}

}