本文介绍如何将静态图表组件改造为可复用、支持动态数据传入的 Vue 组件，通过 props 接收数据并利用 Vue 的响应式机制自动更新图表，无需修改选项配置即可灵活适配不同数据源。
本文介绍如何将静态图表组件改造为可复用、支持动态数据传入的 vue 组件，通过 `props` 接收数据并利用 vue 的响应式机制自动更新图表，无需修改选项配置即可灵活适配不同数据源。
要让图表组件真正“可复用”，关键在于解耦数据与逻辑：将固定的数据声明移出组件内部，改为通过 props 接收外部传入的动态数据。这样，同一个 <PieChart /> 组件就能在不同页面或场景中展示各异的业务数据，而无需复制粘贴或硬编码。
以下是重构后的专业写法（基于 Composition API + defineComponent）：
import { defineComponent, h } from 'vue';
import { GChart } from 'vue-google-charts';
export const type = 'PieChart';
export const options = {
title: 'My Daily Activities',
width: 450,
height: 250,
// 可在此统一配置通用样式，如字体、动画等
};
export default defineComponent({
name: 'PieChart',
components: { GChart },
props: {
chartData: {
type: Array,
default: () => [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
],
// 建议添加 validator 提升健壮性
validator: (val) => Array.isArray(val) && val.length > 0
}
},
setup(props) {
return () => h(GChart, {
data: props.chartData,
options,
type
});
}
});✅ 使用方式简洁直观：
在父组件中，只需绑定响应式数据即可实现图表自动刷新：
<template>
<div class="chart-container">
<PieChart :chart-data="currentData" />
<button @click="switchData">切换数据</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import PieChart from './components/PieChart.vue';
const currentData = ref([
['Product', 'Revenue'],
['A', 1200],
['B', 850],
['C', 1500]
]);
const switchData = () => {
currentData.value = [
['Region', 'Sales'],
['North', 420],
['South', 380],
['East', 510],
['West', 490]
];
};
</script>⚠️ 注意事项与最佳实践：
- 数据格式必须严格遵循 Google Charts 要求：首行为列标题（字符串数组），后续每行为数据行（支持字符串/数字混合）；
- chartData 应为响应式引用（ref 或 reactive），确保变更能触发 GChart 重新渲染；
- 若需深度监听嵌套结构变化（如对象内字段更新），建议使用 shallowRef + 手动触发更新，或确保每次赋值为新数组引用；
- 如需动态控制 options，同样可扩展为 chartOptions prop，但本文聚焦“仅数据可变”的轻量场景；
- 生产环境建议配合 v-if 或加载状态避免空数据渲染异常。
通过以上改造，你的图表组件即具备高内聚、低耦合特性——数据驱动视图，一处定义、多处复用，真正践行 Vue 的响应式设计哲学。
立即学习“前端免费学习笔记（深入）”；
