Vue2中如何将v-for循环数据传入ApexCharts图表？

我正在使用Vue2、Axios和ApexCharts构建图表。ApexCharts官方文档建议使用updateSeries方法将数据传入图表，示例代码如下：

axios({
  method: 'GET',
  url: url,
}).then(function(response) {
  chart.updateSeries([{
    name: 'Sales',
    data: response.data
  }])
})

但该方式对我不适用，因为我获取的数据存储在包含多层嵌套对象和数组的结构中。目前我可以通过v-for循环获取到数据，示例代码如下：

<template>
   <b-container class="my-4">
   <tbody>
      <tr v-for="stat in bIGraphStats.propertyStatsPerMonth">
         <td v-text="stat.date"></td>
      </tr>
   </tbody>
</template>
      
<script>
  export default {
    data: () => ({
      bIGraphStats: null,
    }),
    methods: {
      getInfo(){
      const self = this;
        axios.get(`bi/stats/property/company`, {timeout: 300000})
            .then(response => {
              this.bIGraphStats = response.data
            })
            .catch(error => this.bIGraphStats = error.data);
      },
    },
    mounted() {
      this.getInfo()
    }
  };
</script>

我想知道是否可以将v-for循环中获取到的stat.date等数据传入图表配置，例如想在图表中实现如下配置：

export default {
  data: () => ({
    series: [],
    chartOptions: {
      chart: {
        type: 'bar',
        height: 350
      },
      xaxis: {
        categories: [stat.date],
      }
    }
  }),

请问是否有可行的实现方法？

可行实现方法 #

不需要用v-for循环单独提取数据，直接利用数组的map方法处理嵌套数据，转换成ApexCharts需要的格式，结合Vue的响应式特性自动更新图表。具体步骤如下：

1. 引入并注册vue-apexcharts组件（未注册时需执行）

   import VueApexCharts from 'vue-apexcharts'
   Vue.component('apexchart', VueApexCharts)
   

2. 在组件中定义图表相关数据
   在data中初始化图表配置和系列数据，预留好x轴分类的位置：

   data: () => ({
     bIGraphStats: null,
     series: [],
     chartOptions: {
       chart: {
         type: 'bar',
         height: 350
       },
       xaxis: {
         categories: []
       }
     }
   })
   

3. 在数据请求成功后处理嵌套数据
   在getInfo方法的回调中，直接转换数据格式并更新图表配置：

   <template>
     <b-container class="my-4">
       <!-- 渲染ApexCharts图表 -->
       <apexchart :options="chartOptions" :series="series" />
       <!-- 保留原有的表格展示 -->
       <table>
         <tbody>
           <tr v-for="stat in bIGraphStats?.propertyStatsPerMonth" :key="stat.date">
             <td v-text="stat.date"></td>
           </tr>
         </tbody>
       </table>
     </b-container>
   </template>
   
   <script>
   export default {
     data: () => ({
       bIGraphStats: null,
       series: [],
       chartOptions: {
         chart: {
           type: 'bar',
           height: 350
         },
         xaxis: {
           categories: []
         }
       }
     }),
     methods: {
       getInfo() {
         axios.get(`bi/stats/property/company`, { timeout: 300000 })
           .then(response => {
             this.bIGraphStats = response.data;
             // 提取嵌套数组中的数据列表
             const statsList = this.bIGraphStats.propertyStatsPerMonth;
             // 更新x轴分类（提取所有stat.date）
             this.chartOptions = {
               ...this.chartOptions,
               xaxis: {
                 ...this.chartOptions.xaxis,
                 categories: statsList.map(stat => stat.date)
               }
             };
             // 更新系列数据（替换成你实际需要的数值字段，比如stat.sales）
             this.series = [{
               name: '月度统计数据',
               data: statsList.map(stat => stat.sales)
             }];
           })
           .catch(error => {
             console.error('数据请求失败:', error);
             this.bIGraphStats = error.data;
           });
       }
     },
     mounted() {
       this.getInfo();
     }
   };
   </script>
   

4. 可选：使用ApexCharts原生方法更新
   如果更倾向于官方文档的updateSeries/updateOptions方式，可通过ref获取图表实例后手动调用：

   <template>
     <!-- 添加ref属性 -->
     <apexchart ref="chart" :options="chartOptions" :series="series" />
   </template>
   
   <script>
   // 在getInfo的then回调中替换更新逻辑
   this.$refs.chart.updateSeries([{
     name: '月度统计数据',
     data: statsList.map(stat => stat.sales)
   }]);
   this.$refs.chart.updateOptions({
     xaxis: {
       categories: statsList.map(stat => stat.date)
     }
   });
   </script>
   

内容的提问来源于stack exchange，提问作者Cphml444