问题:统一设置position肯定都会,但是这样的写法不可避免的会遇到这样的问题:
这里只讨论值大于0的情况
series: [
{
data: [120, 200, 150, 0, 10, 110, 130],
type: 'bar',
label: {
show: true,
fontSize: 20,
color: '#db0000',
position: 'insideTop'
}
}
]
解决思路:
找到这组数据中的最大值,然后自己根据实际情况定义一个系数(计算得到一个最小柱高正好可以完整显示数值) showLabel = 最小柱高 = 最大值 / 系数
只要当前的值小于这个最小柱高就展示在柱子靠底边insideBottom,否则展示在柱子靠定边insideTop
获取最大值的方法:排序数组.sort()
之后取最后一位,写个for循环一个一个比
(实际也是sort()),Math.max()
提示:有时候这个值正好可以显示,但是insideBottom
和 insideTop
都是距底部或顶部有间距,用inside更好,设置也是同理,需要自己找到一个更合适的系数就ok了。position如果写成函数之后,数值不会在bar中横向居中(很难受,使用rich改样式也没法居中)!!!非常推荐用:三元运算符!!!
解决:
this.value = [120, 200, 150, 0, 10, 110, 130]
const showLabel = 200 / 10
series.data: this.value.map(item => {
return {
value: item,
label: {
show: true,
position: item < showLabel ? 'insideBottom' : 'insideTop'
}
}
})