在vuechart.js HorizontalBar中将默认值设置为0

npm install vue-chartjs chart.js

import { HorizontalBar, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

export default {
  extends: HorizontalBar,
  mixins: [reactiveProp],
  props: ['options'],
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
}

data() {
  return {
    chartData: {
      labels: ['Label 1', 'Label 2', 'Label 3'],
      datasets: [
        {
          label: 'Data',
          backgroundColor: '#41B883',
          data: [0, 0, 0]
        }
      ]
    }
  };
}

<template>
  <div>
    <custom-chart :chart-data="chartData" :options="options"></custom-chart>
  </div>
</template>

<template>
  <div>
    <custom-chart :chart-data="chartData" :options="chartOptions"></custom-chart>
  </div>
</template>

<script>
import CustomChart from './CustomChart.vue';

export default {
  components: {
    CustomChart
  },
  data() {
    return {
      chartData: {
        labels: ['Label 1', 'Label 2', 'Label 3'],
        datasets: [
          {
            label: 'Data',
            backgroundColor: '#41B883',
            data: [0, 0, 0]
          }
        ]
      },
      chartOptions: {
        // 可以在这里设置其他图表选项
      }
    };
  }
}
</script>