Vue3 Script Setup中ChartJS结合响应式数据无法渲染问题

1. 未处理初始null状态导致的错误 #

你的computed属性直接访问stateData.partnerAnalysis.newPurchases，但初始时partnerAnalysis是null，此时访问newPurchases会抛出类型错误，导致data计算失败，图表无法获取有效数据渲染。

解决方案： #

使用可选链操作符(?.)规避空值访问，同时给初始状态提供默认值：

const data = computed(() => ({
    labels: Object.keys(stateData.partnerAnalysis.value?.newPurchases || {}),
    datasets: [
        // 保持你的数据集配置
    ]
}));

2. storeToRefs后的属性访问方式问题 #

通过storeToRefs获取的stateData.partnerAnalysis是一个Ref对象，在访问其内部属性时，需要明确通过.value访问原始值，否则会访问到Ref对象本身的属性而非存储的数据。

3. 顶层await可能导致组件初始化延迟 #

虽然<script setup>支持顶层await，但如果getPartnerAnalysis请求耗时较长，组件会处于 Suspense 状态，若未搭配<Suspense>组件使用，可能导致图表所在区域无法正常渲染。

解决方案（可选）： #

将数据请求放在onMounted钩子中：

import { onMounted } from 'vue';

// ... 其他代码

onMounted(async () => {
    if (state.partnerAnalysis === null) {
        await state.getPartnerAnalysis();
    }
});

4. 图表容器尺寸问题 #

你的options设置了maintainAspectRatio: false，这意味着图表需要父容器提供明确的宽高，否则可能因尺寸为0而无法显示。

解决方案： #

给图表容器添加样式，设置固定宽高或百分比尺寸：

<template>
    <div style="width: 100%; height: 400px;">
        <Bar id="partner-analysis-chart" :options="options" :data="data" />
    </div>
</template>

5. 数据集配置不完整 #

你代码中datasets的配置被省略，如果数据集缺少data字段或必要的样式配置（比如label、backgroundColor等），图表也无法正常渲染。确保每个数据集都包含完整的必填字段：

datasets: [
    {
        label: '新采购',
        data: Object.values(stateData.partnerAnalysis.value?.newPurchases || {}),
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        borderColor: 'rgb(255, 99, 132)',
        borderWidth: 1
    },
    // 第二个数据集同理
]

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