EChart案例-折线面积渐变色

先看效果

图中的范围是个渐变色，option关键配置

 itemStyle: {
                    normal: {
                       areaStyle: {type: 'default'},
                       color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#56ad66'},
                                {offset: 0.5, color: 'rgba(98, 199, 98, 0.3)'},
                                {offset: 1, color: 'rgba(98, 199, 98, 0.1)'}
                            ]
                        ),
                       borderColor:'#71df6f',//拐点边框颜色
                       borderWidth:2//拐点边框大小
                    }},

new echarts.graphic.LinearGradient生成渐变色对象，具体参数配置查阅官方API。

完整代码：

let data=[];
      for(var i=0;i<12;i++){
        data.push(Math.floor(Math.random()*1000+20))
      }

      let option = {
          title : {
              text: '',
          },
          tooltip : {
              trigger: 'axis',
              backgroundColor:' rgba(23, 99, 143, 0.75)' ,
              padding:[5,10],
              formatter(params){
               let point=params[0];
               return '2019年'+point.name+'月 : '+point.value
              }
          },
          legend: {
              data:['2019'],
              textStyle: {
                color: '#7aaab8',
                fontSize:14
              },

          },

          calculable : true,

          xAxis : [
              {
                name : '(月)',
                nameLocation: 'end',
                nameTextStyle:{
                color: '#a0d7de',
                fontSize:16,
                padding:[50, 0, 0, 10]
               },
                  type : 'category',
                  boundaryGap : false,
                  data : ['1','2','3','4','5','6','7','8','9','10','11','12'],
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                      show: false
                  },
                  offset:10,
                  axisLabel: {
                      show:true,
                      textStyle: {
                        color: '#a0d7de',
                        fontSize:16
                      }
                  },
                  axisPointer:{ //基准线
                    lineStyle:{
                     color:'#52cdef'
                   }
                  }

              }
          ],


          yAxis : [
              {
                axisLabel: {
                  show:true,
                  textStyle: {
                    color: '#a0d7de',
                    fontSize:16
                  }
               },
               axisTick: {
                  show: false
              },
              axisLine: {
                  show: false
              },
              offset:10,
              splitLine: {
                show: true,
                lineStyle:{
                    type:'dashed',
                    color: ['#00f0ff']

                }
              }
            }
          ],
          series : [
              {
                  name:'2019',
                  type:'line',
                  smooth:true,
                  symbolSize: 10,   //设定实心点的大小
                  lineStyle:{
                    color:'#71df6f' //改变折线颜色
                  },
                  lineWidth:2,
                  itemStyle: {
                    normal: {
                       areaStyle: {type: 'default'},
                       color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#56ad66'},
                                {offset: 0.5, color: 'rgba(98, 199, 98, 0.3)'},
                                {offset: 1, color: 'rgba(98, 199, 98, 0.1)'}
                            ]
                        ),
                       borderColor:'#71df6f',//拐点边框颜色
                       borderWidth:2//拐点边框大小
                    }},
                   data:data
              },

          ]
      };
      let myChart = echarts.init(document.getElementById('run-rain-line-chart'));
      myChart.setOption(option);