Laravel9+Vue3用vue-google-charts展示数据遇「Table has no columns」报错求助

问题原因 #

vue-google-charts的data属性要求传入二维数组格式：第一行必须是列名（表头），后续每一行对应一组数据。你直接将Laravel返回的对象数组传给chartData，组件无法识别列定义，因此触发「Table has no columns」错误。

解决步骤 #

1. 转换数据格式 #

将后端返回的对象数组转换为符合要求的二维数组：

• 先定义表头行，比如['兴趣ID', '卡片总数']
• 遍历contacts_per_interests，提取每个对象的interest_oid和total_cards字段组成数据行

2. 修改Vue组件代码 #

推荐使用computed属性处理数据，确保响应式更新：

<template>
  <div class="col-lg-6">
    <GChart
      type="ColumnChart"
      :data="formattedChartData"
      :options="chartOptions"
      style="height: 100%"/>
  </div>
</template>

<script>
import { GChart } from "vue-google-charts";

export default {
  components: {
    GChart
  },
  props: {
    contacts_per_interests: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    formattedChartData() {
      // 定义表头
      const header = ['兴趣ID', '卡片总数'];
      // 转换数据行，把兴趣ID转为字符串避免数字格式问题
      const dataRows = this.contacts_per_interests.map(item => [
        item.interest_oid.toString(),
        item.total_cards
      ]);
      // 合并表头和数据行
      return [header, ...dataRows];
    }
  },
  data() {
    return {
      chartOptions: {
        width: 500,
        height: 300,
        title: '各兴趣分类下的卡片数量',
        hAxis: { title: '兴趣ID' },
        vAxis: { title: '卡片总数', minValue: 0 },
        legend: { position: 'none' } // 单系列数据无需图例
      }
    }
  }
}
</script>

3. 优化建议 #

• 如果后端可以返回interest_oid对应的兴趣名称（比如通过关联查询），可以把item.interest_oid替换为兴趣名称，图表可读性会更强
• 若contacts_per_interests可能为空，可在formattedChartData中添加空数据处理逻辑，避免图表空白

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