圖表-如何使疊層系列精確匹配

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

像這樣：