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

wz_wh

已于 2022-12-23 14:32:25 修改

阅读量5.2k

点赞数 2

文章标签： echarts 前端 javascript

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

本文链接：https://blog.csdn.net/wz_wh/article/details/128395123

版权

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],
         },
       },
     ],
   })
})