echart渐变折线图

效果图，以及代码。关键点在于渐变，后面代码中有注释说明。上下左右四个渐变方向，加上渐变的色彩偏移，既可以完成带渐变的折线图。需要与后端对接，只要改变X轴Y轴的数据，还有一些小的细节就可以了。比较简单实用。 

 

let option={
      color:'#38d7b7',
      tooltip: {
          trigger: 'axis',
         axisPointer: {
          type: 'line',
             lineStyle: {
             type: 'dashed',
             color: '#38d7b7'
             }
         }
      },
      grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['2020-04-20', '2020-04-21', '2020-04-22', '2020-04-23', '2020-04-24', '2020-04-25', '2020-04-26'],
          axisLine:{
              lineStyle:{
                  width:1,
                  type:'dotted',
                  color:'#686868'
              }
          },
          axisTick:{
              show:false
          },
          axisLabel:{
             
          }
      },
      yAxis: {
        name:'近一周调查活动',
        nameTextStyle:{
    	    fontFamily: 'MicrosoftYaHei',
    	    fontSize: '14px',
    	    color: '#686868',
        },
        type: 'value',
        splitLine:{
            lineStyle:{
                type:'dashed'
            }
        },
        axisLine:{
           show:false
        },
          axisTick:{
              show:false
          }
    },
      series: [
          {
              type: 'line',
              smooth:true,
              data:  [15, 32, 14, 33, 9, 12, 41],
             symbolSize:1,
              itemStyle : {
                normal : {
                
              areaStyle : {
                  type : 'default',
                  //渐变色实现
              color : new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化方向
                      //渐变色
                          [ { offset: 0, color: 'rgba(56, 215, 183, 0.4)' },
                          { offset: 0.89, color: 'rgba(56, 215, 183, 0.1)' }
                          ]),
              },
              lineStyle : {  //线的颜色
                  color : '#38d7b7'
              }
          },
        emphasis: { // 鼠标经过时：
            symbol: "circle",
            borderWidth:13,
            borderColor:'rgba(195,243,233,0.7)'
            // color: '#38d7b7',
            // borderColor: '#38d7b7',
            
            }
      },
          }
      ]
  };