图表-如何使叠层系列精确匹配

Question

我正在构建需要在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'
                  }
              },
    }]
};

Answer 1

尝试将数据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'
                  }
              },
    }]
};

你可以得到这样的：

是的，这并不顺利。 使用平滑时，这两个序列不能具有相同的平滑顶部，因为平滑顶部取决于序列数据。 显然，这两个系列具有不同的系列数据。

检查以下：

但是 ，实现这些的其他技巧

只是给你一个主意，使用两个xAxis ，第二个系列比第一个系列具有更多的数据点。 使用更多数据点，您可以使用它来模拟相同的平滑曲线。

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

像这样：