echart 柱状图如何让label文字固定在右侧

原创已于 2022-12-23 14:32:25 修改 · 6.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2022-12-21 11:51:45 首次发布

本文介绍了如何使用Echarts配置项来使柱状图的label文字始终保持在右侧。关键在于设置`position:'insideRight'`和通过动态计算`offset`值以适应图表宽度变化。通过监听窗口大小改变事件，可以实时更新`offset`，确保label位置正确。

echart 柱状图如何让label文字固定在右侧

echarts 柱状图，label文字固定右侧：
在这里插入图片描述
代码如下：

series: [
    {
      data: [],
      color: '#08B76F',
      type: 'bar',
      barWidth: '12px',
      showBackground: true,
      backgroundStyle: {
        color: '#E9EDF2',
        borderRadius: 15,
      },
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'insideLeft',
            offset: [284, 0],
            textStyle: {
              //数值样式，显示的文字大小和颜色
              fontSize: '12',
              color: 'rgba(0,0,0,0.55)',
              fontWeight: 400,
              lineHeight: '18',
            },
            formatter: formatterFun,
          },
          barBorderRadius: 15,
        },
      },
    },
  ],

重点为 position: ‘insideLeft’,offset: [284, 0] 这两句话，offset值可根据当前表格宽度自行调整。

可通过此方式动态调整offset 的值，改变窗体大小或者改变图表宽度时，自动计算最新offset 的值：

nextTick(() => {        
   var width = initEchart.value.getWidth()
   var opt = initEchart.value.getOption()
   var grid = opt.grid[0]
   var right = grid.right
   var left = grid.left
   var x = width - left - right
   initEchart.value.setOption({
     series: [
       {
         label: {
           show: true,
           position: 'insideLeft',
           offset: [x + 20, 0],
         },
       },
     ],
   })
})