如何向折线图添加渐变背景[vue-chart.js]

npm install vue-chartjs chart.js

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

<script>
import { Line } from 'vue-chartjs';

export default {
  extends: Line,
  data() {
    return {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Data',
            data: [10, 20, 30, 40, 50, 60, 70],
            borderColor: 'rgba(0, 0, 0, 1)',
            backgroundColor: this.gradient,
            fill: true
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    };
  },
  computed: {
    gradient() {
      const ctx = this.$refs.canvas.getContext('2d');
      const gradient = ctx.createLinearGradient(0, 0, 0, 400);
      gradient.addColorStop(0, 'rgba(0, 123, 255, 0.5)');
      gradient.addColorStop(1, 'rgba(0, 123, 255, 0)');
      return gradient;
    }
  },
  mounted() {
    this.renderChart(this.data, this.options);
  }
};
</script>