首页 前端知识 echart 柱状图如何让label文字固定在右侧

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

2024-10-15 23:10:32 前端知识 前端哥 525 958 我要收藏

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],
         },
       },
     ],
   })
})
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19010.html
标签
评论
发布的文章

3.1 requests与JSON基础

2024-10-15 23:10:08

React 安装(NPM)

2024-10-15 23:10:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!