Echarts

Question

我正在构建一个折线图，需要在 x 轴上的指定点进行叠加。 My current implementation here 有一个叠加层，但我希望它在 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'
                 }
             },
   }]
};

像这样：

Echarts - 如何使叠加层系列精确匹配

Echarts - how to get overlayer series to a precise fit

javascript