How to show bars above lines’ area of ​style gradient effect in charts?

I need to achieve this result visually speaking

So far, i have been able to go this far. Is it possible to make the gradient areaStyle show behind the bars ?

var myChart = echarts.init(document.getElementById('main'));

var option = {
   "xAxis":{
      "type":"time",
   },
   "yAxis":{
      "type":"value"
   },
   "tooltip":{
      "show":true,
      "trigger":"axis"
   },
   "series":[
      {
         "name":"Test",
         "type":"line",
         "silent":true,
         "animation":false,
         "areaStyle":{
            "opacity":0.1,
         },
         "lineStyle":{
            "width":1
         },
         "data":[
            [
               1620993840000,
               47.6
            ],
            [
               1620993900000,
               50.8
            ],
            [
               1620993960000,
               52.3
            ],
         ],
         "emphasis":{
            "scale":false,
            "focus":"none"
         }
      }
   ],
};

myChart.setOption(option);

I tried a few things with the zlevel property but i could only bring the bars to front if the whole line series is behind (line and dots itself).

I want to keep the line series and dots in front. Only the gradient effect should be behind. Is it possible ?

Thank you.