Vue.js中Chart.js饼图默认不渲染，需点击概览过滤器才加载问题

问题根源 #

你遇到的问题是：页面加载时，虽然默认把概览过滤器设为true，但API拿到数据后没有自动触发过滤逻辑，导致chartData是空的，饼图自然不会渲染，得手动点过滤器才会调用loadData()生成数据。

从你贴的代码看有两个关键问题：

• API请求成功后，只把数据存到了chartMaterials，没调用loadData()处理成饼图需要的chartData
• 你监听的是data属性，但实际数据存在chartMaterials，这个监听完全不会触发

两种修复方式 #

方式一：API返回后直接调用loadData() #

修改getChartData方法，拿到数据后立刻执行过滤逻辑：

getChartData() {
  this.isLoading = true;
  rpc('chart', 'getChartData')
  .then((data) => {
    this.chartMaterials = data;
    this.loadData(); // 新增这行，触发过滤生成chartData
    this.isLoading = false;      
  })
  .catch((err) => {
    console.error(err)
  })
}

方式二：修正watch监听的对象 #

如果想用监听数据变化来触发，把监听目标改成chartMaterials，再加上immediate: true确保初始化时也执行一次：

watch: {
  chartMaterials: {
    immediate: true, // 页面加载时立即执行一次handler
    handler() {
      this.loadData();
    }
  }
}

额外要确认的点 #

• 检查loadData()里确实用了默认的true状态的概览过滤器来处理chartMaterials，生成正确的chartData结构（要符合Chart.js的data格式，比如包含labels和datasets）
• 确保chartData在loadData()执行后不是空值，否则饼图还是不会显示

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