vue-chartjs画渐变色

效果

父层容器的css自己写宽高等样式就可以了，组件代码直接将下面的内容拿去调用即可

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

export default {
  data() {
    return {
      gradient: null,
      gradient2: null
    };
  },
  extends: Line,
  props: [""],
  mounted() {
    this.gradient = this.$refs.canvas
      .getContext("2d")
      .createLinearGradient(0, 0, 0, 450);
    this.gradient2 = this.$refs.canvas
      .getContext("2d")
      .createLinearGradient(0, 0, 0, 450);

    this.gradient.addColorStop(0, "rgba(255, 0,0, 0.5)");
    this.gradient.addColorStop(0.5, "rgba(255, 0, 0, 0.25)");
    this.gradient.addColorStop(1, "rgba(255, 0, 0, 0)");

    this.gradient2.addColorStop(0, "rgba(0, 231, 255, 0.9)");
    this.gradient2.addColorStop(0.5, "rgba(0, 231, 255, 0.25)");
    this.gradient2.addColorStop(1, "rgba(0, 231, 255, 0)");

     this.renderChart({
          labels: ['0','January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
            {
              label: '11月份数值',
              borderColor: '#FC2525',
              pointBackgroundColor: 'white',
              borderWidth: 1,
              pointBorderColor: 'white',
              backgroundColor: this.gradient,
              data: [0,40, 39, 10, 40, 39, 80, 40]
            },{
              label: '10月份数值',
              borderColor: '#05CBE1',
              pointBackgroundColor: 'white',
              pointBorderColor: 'white',
              borderWidth: 1,
              backgroundColor: this.gradient2,
              data: [0,60, 55, 32, 10, 2, 12, 53]
            }
          ]
        }, {responsive: true, maintainAspectRatio: false})
  }
};
</script>