echarts中series给label单独设置position

最新推荐文章于 2024-03-22 17:55:09 发布

Koreyoshi·

最新推荐文章于 2024-03-22 17:55:09 发布

阅读量5.5k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Koreyoshi123654/article/details/126125879

版权

echarts 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文探讨了ECharts柱状图中数值标签显示的问题，当柱子高度不同时，标签可能无法完全显示。解决方案是通过计算最大值和系数确定显示位置，当数值小于特定阈值时，标签显示在柱子底部，否则显示在顶部。使用三元运算符实现动态调整position，确保标签清晰可见。

摘要由CSDN通过智能技术生成

问题：统一设置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'
     }
   }
 })