Vue&&Echarts 解决走势图线下的阴影渲染

vue 不带有 x y 坐标轴的echarts 走势图数据线下的阴影实现，如下图为最终效果（从上至下渐变）

找了echarts相关官网，配置信息很全面，以至于不知道该从哪里入手，最终以这位大佬的博客作为切入点:
https://blog.csdn.net/zgh0711/article/details/80607158#commentBox

文章中有关options的相关配置是数据图中的重要配置，其中series属性有关于数据的线的样式管理。

//面积图 图表设置
let lineSeries = [
  {
    type: 'line',
    data: lineData.values,//走势图数据 其格式：[1,2,3,4,5,6] 
    smooth:true,
    itemStyle:{
      color:'#354162',
      opacity:0.1
    },
    lineStyle:{
      width:1,
      color:'#354162'
    },
    areaStyle: {
      color:'#EEEEEE'//可改为渐变
    },
  },
]

//共用的一些图表设置
let option = {
  grid: {
    top: 10,
    bottom: 20,
    left: 10,
    right: 10,
  },
  xAxis: {
    data: undefined,
    scale: true,
    axisLabel: {
      color: '#A0A0A0',
      fontSize: 10,
    },
    axisLine: {
      lineStyle: {
        color: '#A0A0A0',
      },
    },
  },
  yAxis: {
    scale: true,
    position: 'right',
    axisLabel: {
      color: '#A0A0A0',
      fontSize: 10,
      inside: true,
    },
    axisLine: {
      lineStyle: {
        color: '#A0A0A0',
      },
    },
    splitLine: {
      lineStyle: {
        color: '#EEEEEE',
      },
    },
  },
  series: lineSeries,//上述定义的线具体颜色和背景色
}


// 配置好以上信息
this.chart = echarts.init(document.getElementById('echarts'));//定义echarts初始化对象
this.chart.setOption(option);//设置数据及样式

执行以上内容要有一定vue开发基础，在想要mounted methods中定义方法，复用等。