使用echarts生成颜色渐变曲线图

效果图:

1、安装echarts

npm install echarts --save

2、全局注册组件

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

3、结构
附: 计算显示日期的工具文件

/** 计算月份显示
 * @param {} 
 * @returns {}
 */
 export function getLastFiveMonths() {
    let dates = [];
    let currentDate = new Date();

    // 开始时就设置为前一个月
    currentDate.setMonth(currentDate.getMonth() - 1);

    for (let i = 0; i < 5; i++) {
        let month = currentDate.getMonth() + 1;  // getMonth 返回的月份从 0 开始，所以我们需要加 1
        let year = currentDate.getFullYear();

        // 根据你的需求，月份需要转化为中文
        let monthInChinese = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"][month-1];
        
        dates.push(monthInChinese + '\n' + year);  // 将新的日期添加到数组的开始

        currentDate.setMonth(currentDate.getMonth() - 1);  // 将日期设置为前一个月
    }

    return dates;
}

<template>
  <div class="EchartPractice">
    <div id="main"></div>
  </div>
</template>
import { getLastFiveMonths } from '@/utils/calculate'
// 组件数据
  data() {
    return {
      figure: [2297, 1297, 2297, 1297, 2297],
      colorType: [
        {
          offset: 0,
          color: '#b5c3ff' // 0% 处的颜色
        },
        {
          offset: 0.5,
          color: '#b5c3ff' // 0% 处的颜色
        },
        {
          offset: 1,
          color: '#bcd9fb' // 100% 处的颜色
        }
      ],
      tag: null
    }
  },
mounted() {
  this.drawChart()
},
drawChart() {
      console.log("返回的日期",getLastFiveMonths());
      let getLastFiveMonthsData=getLastFiveMonths()
      let that = this
      let myEchart = this.$echarts.init(document.getElementById('main'))
      let option = {
        xAxis: {
          data: getLastFiveMonthsData,
          axisLine: {
            lineStyle: {
              color: '#B5C3FF' // 这里设置x轴颜色
            }
          },
          axisTick: {
            show: true, //  是否显示
            inside: false, // 坐标轴刻度是否朝内，默认朝外(false)
            length: 5, // 坐标轴刻度的长度
            alignWithLabel: true, //刻度线与刻度标签是否对齐
            lineStyle: {
              color: '#B5C3FF', //刻度线颜色
              width: 2, // 刻度线粗细
              type: 'dashed' // 坐标轴线线的类型（'solid'实线；'dashed'虚线；'dotted'点状）
            }
          },
          axisLabel: {
            color: '#1F359C',
            fontStyle: 'normal', // 文字字体的风格（'normal'无样式；'italic'斜体；'oblique'倾斜字体）
            fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '13' // 文字字体大小
          }
        },
        yAxis: {
          show: false // 是否显示x轴
        },

        series: [
          {
            data: this.figure,
            type: 'line',
            //  formatter: '{c}次',

            symbolSize: 0, // 设置数据点大小为0，即不显示圆点
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#1F359C'
                  },
                  //   添加单位
                  formatter: function (params) {
                    let type = null
                    if (that.message == 1) {
                      type = params.value + '秒'
                    } else {
                      type = params.value + '次'
                    }
                    return type
                  }
                }
              }
            },
            smooth: true,
            // symbol: 'none',
            areaStyle: {
              // color: '#b5c3ff'
              normal: {
                color: {
                  type: 'linear',
                  // 设置渐变起始点和结束点，从上到下渐变
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: that.colorType,
                  global: false // 缺省为 false
                }
              }
            }
          }
        ]
      }
      myEchart.setOption(option)
    }