vue-chartjs 柱状图显示数值

Vue-chartjs是一个基于Vue.js的库，它允许你在Vue应用中轻松地集成图表，包括柱状图。要在Vue项目中创建一个柱状图并显示数值，你可以按照以下步骤操作：

1. 首先，你需要安装`vue-chartjs`和`chart.js`库。可以在`npm`或`yarn`中运行相应的命令：

   npm install vue-chartjs chart.js --save

2. 在你的Vue组件中引入并配置它们：

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

const Bar = {
  extends: Pie,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
};

这里我们创建了一个名为`Bar`的自定义组件，它继承了`Pie`并且混合了响应式属性。

3. 然后，在你的模板里使用这个组件，并传入数据和选项：

<template>
  <div>
    <bar :chart-data="yourChartData" :options="yourOptions"></bar>
  </div>
</template>

<script>
export default {
  components: {
    Bar,
  },
  data() {
    return {
      yourChartData: {
        labels: ['Label1', 'Label2', 'Label3'], // 标签数组
        datasets: [
          {
            label: 'Value1',
            data: [40, 60, 80], // 数值数组对应标签
            backgroundColor: 'rgba(75, 192, 192, 0.2)', // 颜色设置
          },
          // 可添加更多数据集...
        ],
      },
      yourOptions: {} // 你想要的图表选项，如动画、轴标题等
    };
  },
};
</script>

在这个例子中，`yourChartData`应该包含标签和对应的数值数组，`yourOptions`则是图表的配置选项。