Echarts - how to get overlayer series to a precise fit

Question

I'm building a line graph that needs an overlay at a specified point on the x-axis. My current implementation here has an overlay, but I would like it to start and stop at a straight vertical line on the x-axis and also have a smooth top that follows along the line. Has anybody implement something similar to this?

option = {
    xAxis: {
      data: [1,2,3,4,5,6,7,8,9,10,11,12],
      boundryGap: false,

    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
        type: 'line',
        smooth: true,
        areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                          offset: 0,
                          color: 'rgba(250,10,10,1)'
                      }, {
                          offset: 0.8,
                          color: 'rgba(250,250,0, 0.2)'
                      }], false),
                      shadowColor: 'rgba(0, 0, 0, 0.1)',
                      shadowBlur: 10
                  }
              },
    },
    {
      data: [0,0,0,0,0,0,0,0.32,0,0,0,0],
        type: 'line',
        smooth: true,
        areaStyle: {
                  normal: {
                      color: 'black'
                  }
              },
    }]
};

Answer 1

try change data 0 to null

option = {
    xAxis: {
      data: [1,2,3,4,5,6,7,8,9,10,11,12],
      boundryGap: false,

    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
        type: 'line',
        areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                          offset: 0,
                          color: 'rgba(250,10,10,1)'
                      }, {
                          offset: 0.8,
                          color: 'rgba(250,250,0, 0.2)'
                      }], false),
                      shadowColor: 'rgba(0, 0, 0, 0.1)',
                      shadowBlur: 10
                  }
              },
    },
    {
      data: [null,null,null,null,null,null,null,0.32,0.05,null,null,null],
        type: 'line',
        areaStyle: {
                  normal: {
                      color: 'black'
                  }
              },
    }]
};

you can get like this:

Yes, it's not smooth. With smooth, these two series cannot have same smooth top, because the smooth top depends on series data. Apparently, these two series have different series data.

check this below:

BUT , these still other trick to achieve this,

just give you a idea, use two xAxis , the second series have more data points than first series. With more data points, you can use that to simulate same smooth curve.

option = {
   xAxis: [{
     data: [1,2,3,4,5,6,7,8,9,10,11,12],
     boundryGap: false,
      axisTick: {
               alignWithLabel: true
           }
   }, {
     data: [1 ,2,3,4,5,6,7,8,9,10,11,12, 1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4],
     boundryGap: false,
      axisTick: {
               alignWithLabel: true
           }
   }],
   yAxis: {
       type: 'value'
   },
   series: [{
       data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
       type: 'line',
       smooth: true,
       areaStyle: {
                 normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                         offset: 0,
                         color: 'rgba(250,10,10,1)'
                     }, {
                         offset: 0.8,
                         color: 'rgba(250,250,0, 0.2)'
                     }], false),
                     shadowColor: 'rgba(0, 0, 0, 0.1)',
                     shadowBlur: 10
                 }
             },
   },
   {
     data: [,,,,,,,,,,,,,,,,,0.32,0.15, 0.075],
       type: 'line',
       xAxisIndex: 1,
       smooth: true,
       areaStyle: {
                 normal: {
                     color: 'black'
                 }
             },
   }]
};

like this: