【Echarts】解决[柱状图设置barMinWidth导致的柱体重叠]与解决[柱状图设置barMinHeight导致数值0也有高度]

问题一：echarts 柱状图 设置最低高度，值为0时不显示，有值才显示最低高度

在业务场景中，我们被要求设置最小的柱体宽度，以免在数据相差过大的时候看不到小值数据的柱体。

所以我们会为柱状图设置最小高度，即barMinHeight。但是数据为0的时候也会有最小高度，这显然是不合理的（如上图）。

解决方法：将0值改为null

series:[{
...,
name: '柱子1',
data: item.data.map(item => (item === 0 ? null : item)),
barMinHeight: 10,
}]

问题二：柱状图设置barMinWidth导致的柱体重叠

场景：在多数据的状图里，我们需要配置barMinWidth来美化柱状图的显示效果

没加barMinWidth​

上图是没有配置最细柱体宽度的效果，这肯定是不行的，毕竟我们要看的是柱状图而不是针状图啊。那么有人会问：这还不简单？把barMinWidth给她设置上不就完事了？

 结果让人大跌眼镜：我们可以很明显地看到许多柱体叠合在了一起，那么这是为什么呢？

作者认为，这是barMinWidth改变了柱体占据空间的划分，导致划分失常而发生重叠

但是作者翻遍了全网，也没找到可以解决 barMinWidth导致的柱体错位的问题。

但是作者发现错位问题与图表容器宽度有关，也就是当前容器的当前面（考虑滑动）的柱子越多，图表容器当前宽度下能包裹的柱体就越少，于是我们可以用滑动来解决问题，设置每个滚动面不得超过n条柱子（n看你们的应用场景和窗口大小进行设配）。

// 处理滚动节流
function handleDataZoom(dataZoom, dataArr) {
  const customShowNum = 45;
  let endValue = 0;
  // datarArr的长度等同于每个维度有n个指标值，也就是一个维度单位有n条柱体
  if (dataArr.length <= customShowNum) {
    endValue = dataArr.length
      ? Math.floor(customShowNum / dataArr.length) - 1
      : 0;
  }
  return dataZoom.map(item => ({
    id: item.id,
    type: item.type,
    xAxisIndex: item.xAxisIndex,
    filterMode: item.filterMode,
    zoomLock: false,
    moveOnMouseWheel: true,
    moveOnMouseMove: false,
    preventDefaultMouseMove: true,
    zoomOnMouseWheel: false,
    startValue: 0,
    endValue
  }));
}

starValue和endValue控制的是显示多少组数据

效果：（滚动查看）