vue echarts 带有阴影的折线图

<style>
  @import "../../css/style.css";
</style>
<style scoped>
  @import "../../css/vue_single_line.css";
</style>
<template>
    <div class="single_line">
       <chart  class="line" :options="singleLine"></chart>
       <div class="space"></div>
      <div class="lineBtn">
        <button @click="toHalf">Half Line</button>
        <button @click="BarChart" >Bar Chart</button>
      </div>
    </div>

</template>



<script>
  import eCharts from 'vue-echarts/components/ECharts'
    export default {
        data() {
            return { }
        },
      created() { },
      methods:{
        toHalf(){
          this.$router.push({path:'/half_pie'})
        },
        BarChart(){
          this.$router.push({path:'/single_bar'})
        }
      },
      computed:{
        singleLine(){
          return{
            grid: {
             left: '2%',
              right: '2%',
              bottom: '10%',
              containLabel: false
            },
            calculable : true,
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['01', '02', '03', '04','04','05'],
              interval: 0,
              axisTick: {
                show: false,
                inside: true,
                lineStyle: {
                  color: '#10899A'
                }
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#06D3CD'
                }
              },
              axisLabel: {
                rotate: 8,
                color: '#06D3CD',
                fontFamily: 'PingFangSC',
                fontSize: 14,
                fontWeight: 300
              }
            },
            yAxis: {
              type: 'value',
              show: false,
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#06D3CD'
                }
              },
              axisTick: {
                lineStyle: {
                  color: '#10899A'
                },
              },
              axisLabel: {
                showMaxLabel: false,
                color: '#06D3CD',
                fontFamily: 'PingFangSC',
                fontSize: 14,
                fontWeight: 300
              }
            },
            series: [{
              data: [0,123, 186, 261, 191,0],
              type: 'line',
              smooth: 0.4,
              symbol: "circle",
              symbolSize: 10,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#0635F8'
                  },
                  color: "#F7CD5D",
                  borderWidth: 1,
                  borderColor: '#fff',
                }
              },
              //阴影
              areaStyle: {
                normal: {
                  color: new eCharts.graphic.LinearGradient(
                    0, 0, 0, 1, [
                      {
                      offset: 0,
                      color: '#0635F8'
                    },
                      {
                        offset: 0.5,
                        color: '#72BFE3'
                      },
                      {
                        offset: 1,
                        color: 'rgba(114,191,227,0.3)'
                      }
                    ])
                }
              }
            }]
          }
        }

      }
    }

</script>