在vue chart js中为垂直条形图添加图例

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

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

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

data() {
  return {
    chartData: {
      labels: ['数据1', '数据2', '数据3'],
      datasets: [
        {
          label: '图例1',
          backgroundColor: '#f87979',
          data: [10, 20, 30]
        },
        {
          label: '图例2',
          backgroundColor: '#7acbf9',
          data: [15, 25, 35]
        }
      ]
    },
    chartOptions: {
      responsive: true,
      maintainAspectRatio: false
    }
  }
}