echarts连续数据，数据量较少时柱体溢出Y轴或者canvas问题

场景

需求画一个柱状图，准确来说是一个直方图。数据是连续的，根据echarts文档，连续数据使用了Xaxis.type="value"，效果还不错，但是出现一个问题。当数据量比较少时候，比如只有两个柱体或者三个柱体时候，出现溢出。如下图

测试后只有2、3、4个柱体都会溢出。

观察发现前后都溢出，第一想法，设置最大最小值，限制出去，因为步长是一致的

步长一致，且连续，那么就是有序的，即可得出：

最大值=数据最后一项+步长
最小值=数据第一项-步长

再给Xaxis设置min 以及 max

解决问题，数量小的问题。

但是同时引出新问题

新的问题

上面解决数据量少的问题后，当数据量够多时候，也就是数据量大于4的时候。如下图

因为设置了最大最小值，导致最后多出一条分割线，影响视觉效果。因为数据最后一个点是128，所以多出来的线就是8导致的。

上面的方案已经无法解决这个问题了（或者说解决起来很麻烦，需要大量计算）

经上面测试，只有2,3,4这三种情况会出现溢出问题，那么针对这三种情况，使用

boundaryGap：["30%","30%"];

解决呢？

测试后发现，不同数量的主题对应的gap值也不一样才能达到完美状态。立即写出代码，也是结论，看代码

  switch(x.length){
    case 2:{
      boundaryGap=["30%","30%"];
      break;
    }
    case 3:{
      boundaryGap=["20%","20%"];
      break;
    }
    case 4:{
      boundaryGap=["10%","10%"];
      break;
    }
    default:{
      boundaryGap=["0%","0%"];
    }
  }

针对三种情况做不同比例的左右夹紧。

同时解决上诉两个问题。

结语

为了完美解决直方图，数据量较少时候，柱体溢出问题的探索。针对2、3、4个柱体单独处理，解决问题，但是问题原因未找到，不知道是不是echarts的bug，希望有大佬指教。如果有更好的解决办法，也欢迎留言，交流一波~