问题一:echarts 柱状图 设置最低高度,值为0时不显示,有值才显示最低高度
在业务场景中,我们被要求设置最小的柱体宽度,以免在数据相差过大的时候看不到小值数据的柱体。
所以我们会为柱状图设置最小高度,即barMinHeight。但是数据为0的时候也会有最小高度,这显然是不合理的(如上图)。
解决方法:将0值改为null
series:[{
...,
name: '柱子1',
data: item.data.map(item => (item === 0 ? null : item)),
barMinHeight: 10,
}]
问题二:柱状图设置barMinWidth导致的柱体重叠
场景:在多数据的状图里,我们需要配置barMinWidth来美化柱状图的显示效果
![](https://i-blog.csdnimg.cn/blog_migrate/a0da1feee252fcd81cf35dbeca8e1cf0.png)
上图是没有配置最细柱体宽度的效果,这肯定是不行的,毕竟我们要看的是柱状图而不是针状图啊。那么有人会问:这还不简单?把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控制的是显示多少组数据
效果:(滚动查看)