背景
echarts 柱状图, label 默认显示在柱内, 当数据最大值和最小值相差过大时, 短柱放不下 label , 样式不美观
解决方法
- 传入数据时, 不传入实际数据, 而是传入
${当前实际数据}.${数据最大值}
(数据本身不能为小数) - 在
series.label.formatter
中, 拿到了之前传入的数据,.split('.')
得到实际数据和数据最大值 - 设置
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 '';
}
}
}