柱状图值与 y 轴起点值相同时,柱状图不会显示,如果需要显示,可以给柱状图设置最小高度
使用 barMinHeight 属性给柱状图设置最小高度
y轴起点为0时
// 设置最小高度 10
const barData = [10, 20, 30]
series:{
type: 'bar',
data: barData,
barMinHeight: 10,
}
以上写法只适用于 y 轴起点为 0 的情况,y 轴起点不为 0 的时候,比如自适应坐标轴起点时,设置的 10,有时候会看不到,或者表现的高度不对。
y轴起点不为 0 时,需要计算起点,再加上需要显示的最小高度
// 设置最小高度 3
renderBarMinHeight(barMinHeight = 3) {
// 获取渲染的 chart 示例
const chart = this.$refs.echart.getInstance();
const option = chart.getOption();
const series = option.series;
const yAxis = option.yAxis;
if (yAxis?.length) {
yAxis.forEach((axis, idx) => {
const serie = series.find((item) => item.yAxisIndex === idx) || series[0];
if (serie.type === 'bar') {
// _extent 里面是 y 轴的最小值和最大值,格式如 [2,100]
const { _extent: yAxisScale } = chart.getModel().getComponent('yAxis', idx).axis.scale;
const yMin = yAxisScale[0];
// 将 y 轴上的点转为 px 长度值,坐标原点为左上角,越往下,px 越大,barMinHeight 是从 y 轴为 0 处开始计算
// y 轴 0 点距离左上角坐标原点的高度
const zeroPx = chart.convertToPixel({ yAxisIndex: idx }, 0);
// y 轴起点点距离左上角坐标原点的高度
const minPx = chart.convertToPixel({ yAxisIndex: idx }, yMin);
// zeroPx - minPx: y 轴从 0 到起点,被隐藏的高度, 加上 barMinHeight,显示出来的最小高度即为设置的最小高度
serie.barMinHeight = zeroPx - minPx + barMinHeight;
}
});
}
chart.setOption({ series });
}
以上动态计算的高度,在图表渲染完成后,再调用。在 vue 中,可在 setOption 中,在渲染后的 $nextTick 里面进行调用。