echarts面积图颜色渐变的实现

之前经常使用echarts来实现常见的折线、柱形、饼状等图表。今天做做数据大屏的时候，ui小姐姐问我可以实现渐变面积图形吗？ 小哥哥表示男人不能说不行，这都是小场面。接下来我们看下如何使用echarts实现渐变面积图。

option = {
    grid:{//设置图表四周留白间距
	  top:'2%',
	  right:'2%',
	  bottom:'4%',
	  left:'4%'
	},
    xAxis: {
        type: 'category',
        boundaryGap: false,//设置x轴两边的留白
        axisTick:{ //x轴刻度尺
		    show:false
        },
        axisLine: {//x轴线条颜色
            lineStyle: {
                color: '#999'
            }
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        max:1400,//最大刻度值
        interval:100,//刻度值间隔值
        splitLine :{//网格线
          show:false //关闭网格线
          或
           lineStyle:{
             type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
             color:'#ededed'  //网格线颜色
          },
        },
        axisLine: {//y轴线条颜色
            show: true,
            lineStyle: {
                color: '#999'
            }
        },
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,//面积图改成弧形状
        lineStyle: {
            width: 1,//外边线宽度
            color:'red'//外边线颜色
        },
        showSymbol: false,//去除面积图节点圆
        areaStyle: {//区域填充渐变颜色
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(237,66,100, 0.5)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(234,174,10, 1)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        }
    }]
};

以上便是用echarts来实现的面积图，可能写的不到位，欢迎大家指正。