echart折线图,线性渐变

 

setEchart(val){
    // 基于DOM，初始化echarts实例（注意！Vue的DOM日怪的很，一般要腾个1秒才加载完）
    this.lineChart = this.$echarts.init( document.getElementById("charts"));
    onresize=()=>{
        .lineChart.resize();//当页面大小变化→图标对应变化
    }
    var xList = [];   //X轴坐标值
    var dayIncomesList = [];  //X轴数据
    if(val){
       val.forEach(item =>{
           if(item.date < 10){
               item.date = item.date.slice(1)
           }
            xList.push(item.date+'号');
            dayIncomesList.push(item.amount);
        })
    }
                
   // 绘制折线图（曲线图）
   this.lineChart.setOption({
      title: {
           text: '日度收入入账趋势图',
           textStyle: {
               color: '#fff', 
               fontSize:"15"
           },
      },
       grid: {
           top: 35,
           left: '3%',
           right: '5%',
           bottom: '5%',
           containLabel: true//false是依据坐标轴来对齐的,true是依据坐标轴上面的文字边界来对齐
    },
    xAxis: {
        boundaryGap: false, //防止统计图左侧和纵轴有间隙
        axisLabel: { 
            textStyle: {
                color: "#fff"
            } 
        },
        axisTick: { 
             show: false
        }, //隐藏横坐标刻度小线条
        splitLine: {
            show: true,
            lineStyle: { 
                color: ["#2E3B48"] 
            } //纵向分割线    182D40
        },
        data: xList
    },
    yAxis: {
        type: "value",
        min: 0,
        minInterval: 1,
        nameLocation: "end",
        nameTextStyle: { 
            color: "#fff",
            fontSize: "12" 
        },
        axisLabel: { 
             extStyle: { 
                  color: "#fff" 
             } 
        ,
        axisTick: { 
             show: false
        }, //隐藏纵坐标刻度小线条
        splitLine: {
            show: false,
            lineStyle: { 
                  color: ["#fff"]
            } //横向分割线
        },
        axisLine: {
             lineStyle: {
                  color: "2E3B48",
                  width: 1
             } 
        }
   },
   series: [
       {
            smooth: true, //平滑
            symbol: "none", // 去掉小圆点
            type: "line",
            symbolSize: 10, //折线拐点大小
            data: dayIncomesList,
            itemStyle: {
                normal: {
                    color: "#18c196", //图例颜色
                    borderWidth: 4,
                    borderColor: "#18c196",
                    lineStyle: { color: "#18c196", width: 2 }
                }
            },
            areaStyle: {
                 normal: {// 渐变填充色（线条下半部分）
                      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                           { offset: 0, color: "#18c196" },
                           { offset: 1, color: "#18c19600" }
                      ])
                  }
             }
      },
   ]
});
}