让 echarts 柱状图 label 根据柱高度自适应显示在柱内/柱外

背景

echarts 柱状图, label 默认显示在柱内, 当数据最大值和最小值相差过大时, 短柱放不下 label , 样式不美观

解决方法

1. 传入数据时, 不传入实际数据, 而是传入 ${当前实际数据}.${数据最大值} (数据本身不能为小数)
2. 在 series.label.formatter 中, 拿到了之前传入的数据, .split('.') 得到实际数据和数据最大值
3. 设置 label.padding , top 为负数(自己试), 判断当前数据与数据最大值相差过大时(自己试), 把 formatter 返回的字符串加上一个换行 \n(自己调试, 一个不行就两个), 这样一来, 正常柱显示在柱内, 短柱显示在柱外

代码示例

label: {
    show: true,
    position: 'insideTop',
    padding: [-26, 0, 0, 0],
	formatter: row => {
	    const temp = row.data.split('.');
	    const data = temp[0];
	    const max = temp[1];
	    if (data !== 0) {
		    // 这里进行判断, 当前 data < max / 12 时, 少加一个 \n , 配合 padding 让 label 显示到柱顶部
	        return data * 12 > max ? `\n\n${data}` : `\n${data}`;
	    } else {
	        return '';
	    }
	}
}