Javascript Echarts-如何使覆面系列精确贴合

我正在构建一个线图，它需要在x轴上的指定点进行覆盖。有一个覆盖，但我想它开始和停止在一个直线垂直线在x轴上，也有一个平滑的顶部，沿着这条线。有人实现过类似的东西吗

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'
                  }
              },
    }]
};

---

尝试将数据

0

更改为

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'
                  }
              },
    }]
};

您可以这样做：

是的，它不光滑。使用“平滑”，这两个序列不能具有相同的平滑顶部，因为平滑顶部取决于序列数据。显然，这两个系列有不同的系列数据

请检查以下内容：

但是，实现这一目标的其他技巧

给你一个想法，使用两个X轴，第二个系列比第一个系列有更多的数据点。有了更多的数据点，您可以使用它来模拟相同的平滑曲线

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'
                 }
             },
   }]
};

像这样：

---

您能在图像中绘制吗？您需要如何输出