如何向Vue-google-charts组件传值并实现图表动态适配？

1. 修改PieChart组件代码 #

把硬编码的data替换成组件的props，让父组件能传入自定义数据，同时保留原示例数据作为兜底：

<script>
import { defineComponent, h } from 'vue';
import { GChart } from 'vue-google-charts';

const type = 'PieChart';

// 保持统一的图表配置
const options = {
  title: 'My Daily Activities',
  width: 450,
  height: 250,
};

export default defineComponent({
  name: 'GoogleChart',
  components: {
    GChart,
  },
  // 定义接收外部数据的props
  props: {
    data: {
      type: Array,
      // 设置默认示例数据，避免无数据时出错
      default: () => [
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7],
      ],
      // 验证数据格式符合Google Charts要求
      validator: (value) => {
        return value.length >= 2 && Array.isArray(value[0]);
      }
    }
  },
  setup(props) {
    // 使用传入的props.data渲染图表
    return () =>
      h(GChart, {
        data: props.data,
        options,
        type,
      });
  },
});
</script>

2. 父组件中传入自定义数据使用组件 #

在需要用图表的.vue文件里，定义自定义数据并通过v-bind（简写:）传入组件：

<template>
  <!-- 传入自定义数据 -->
  <GoogleChart :data="myChartData" />
</template>

<script>
import GoogleChart from './path/to/GoogleChart.vue';

export default {
  components: {
    GoogleChart,
    // 要是习惯用<PieChart />作为标签，改成：
    // PieChart: GoogleChart
  },
  data() {
    return {
      // 自定义图表数据，格式需符合Google Charts要求
      myChartData: [
        ['Activity', 'Time Spent'],
        ['Coding', 8],
        ['Reading', 3],
        ['Exercise', 1],
        ['Hobbies', 2],
        ['Sleep', 10],
      ]
    };
  }
};
</script>

如果偏好<PieChart />作为组件标签，只需在父组件注册时把组件名改为PieChart，之后就能用<PieChart :data="myChartData" />引用。

关键说明 #

• props验证：添加了数据格式校验，确保传入的数据包含表头和至少一行内容，避免渲染报错。
• 默认数据：保留原示例数据作为默认值，即使父组件不传数据，图表也能正常显示示例内容。
• 响应式更新：Vue的props是响应式的，父组件的myChartData变化时，图表会自动重新渲染更新数据。

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