VueJS中根据交互显示空白PieChart的实现问题

当前代码存在两个核心问题导致需求无法实现：

• PieChart组件内部的chartData仅在初始化时复制props值，props更新时不会自动同步，删除数据后组件无法感知到数据变化
• 当数据为空时，Chart.js的Pie图表默认无法正确渲染空白状态

1. 让PieChart组件的chartData响应props变化 #

将组件内的chartData从data改为计算属性，这样props更新时会自动重新计算并同步：

<template>
  <Pie
    v-if="loaded"
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</template>

<script>
import {Chart as ChartJS, ArcElement, Tooltip, Legend} from 'chart.js';
import {Pie} from 'vue-chartjs';

ChartJS.register(ArcElement, Tooltip, Legend);

export default {
  name: 'PieChart',
  components: {Pie},
  props: ['data', 'bgColor', 'labels'],
  computed: {
    chartData() {
      return {
        labels: [...this.labels],
        datasets: [
          {
            data: [...this.data],
            backgroundColor: [...this.bgColor],
          },
        ],
      };
    }
  },
  data() {
    return {
      chartOptions: {
        responsive: true,
        elements: {
          arc: {
            borderWidth: 0,
          },
        },
      },
      loaded: true,
    };
  },
};
</script>

2. 处理空数据的空白饼图显示 #

当data数组为空时，通过设置透明占位数据+隐藏插件的方式实现空白饼图效果，修改计算属性chartData：

computed: {
  chartData() {
    // 空数据时返回占位配置
    if (this.data.length === 0) {
      return {
        labels: [],
        datasets: [
          {
            data: [1],
            backgroundColor: ['rgba(0,0,0,0)'], // 完全透明背景
          },
        ],
      };
    }
    // 正常数据返回原配置
    return {
      labels: [...this.labels],
      datasets: [
        {
          data: [...this.data],
          backgroundColor: [...this.bgColor],
        },
      ],
    };
  }
}

同时可以优化图表配置，隐藏空状态下的提示框和图例：

chartOptions: {
  responsive: true,
  elements: {
    arc: {
      borderWidth: 0,
    },
  },
  plugins: {
    tooltip: { enabled: false },
    legend: { display: false }
  }
},

3. 完善父组件的删除方法 #

添加数据长度判断，避免无数据时执行删除操作导致数组越界：

deleteHandle() {
  if (this.chartData.labels.length > 0) {
    this.chartData.labels.pop();
    this.chartData.datasets[0].data.pop();
    this.chartData.datasets[0].backgroundColor.pop();
  }
}

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