vue3 堆叠柱状图增加比例标签

在 Vue 3 中，要为堆叠柱状图增加比例标签，你可以使用 Chart.js 这个流行的图表库。下面是一个简单的示例代码，演示了如何使用 Chart.js 在 Vue 3 中创建一个堆叠柱状图，并添加比例标签：

1. 首先，确保你的项目中已经安装了 Chart.js 和 vue-chartjs。你可以使用以下命令进行安装：

npm install chart.js vue-chartjs

2. 在你的组件中导入所需的库和模块：

import { Bar, mixins } from 'vue-chartjs';

const { reactiveProp } = mixins;

3. 创建一个名为 "StackedBarChart" 的组件，并扩展 `Bar` 类和 `reactiveProp`。

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: null,
    },
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};

4. 在模板中使用 `<stacked-bar-chart>` 标签，并传递数据和选项作为属性：

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

5. 在组件的 `data` 中定义你的图表数据和选项：

data() {
  return {
    chartData: {
      labels: ['A', 'B', 'C', 'D'],
      datasets: [
        {
          label: 'Data 1',
          data: [10, 20, 30, 40],
          backgroundColor: '#f87979',
        },
        {
          label: 'Data 2',
          data: [30, 20, 10, 50],
          backgroundColor: '#7acbf9',
        },
      ],
    },
    chartOptions: {
      scales: {
        x: { stacked: true },
        y: {
          stacked: true,
          ticks: {
            callback: function (value) {
              return value + '%';
            },
          },
        },
      },
    },
  };
},

在上面的代码中，我们定义了两个数据集（Data 1 和 Data 2），并使用了不同的颜色。在 `chartOptions` 中，我们将 `stacked` 属性设置为 `true` 来启用堆叠效果，并使用 `callback` 函数将 y 轴刻度值转换为百分比形式显示。

这样就可以在 Vue 3 中创建一个堆叠柱状图，并添加比例标签了。你可以根据自己的需求调整数据和选项。希望对你有所帮助！