echarts柱状图的label放置到柱子的顶部

最新推荐文章于 2024-05-22 18:08:01 发布

略胜潘安

最新推荐文章于 2024-05-22 18:08:01 发布

阅读量4.2k

点赞数 3

文章标签： echarts 前端

本文链接：https://blog.csdn.net/weixin_44196453/article/details/130347905

版权

常规的echarts柱状图的label都是跟随柱状图的，通过设置position可以让label跟随柱子在上、中、下进行调整，如下图：

echarts本身不支持将label固定放置在背景的上部。要想实现该功能，可以利用echarts的轴，增加一条x轴放置在上部，然后将轴的label格式化设置即可。效果如下图：

echarts的完整的options配置如下：

option = {
  grid: [
    {
      top: '10%'
    }  
  ],
  xAxis: [
    {
      type: 'category',
      position: 'bottom',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
      type: 'category',
      position: 'top',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        show:true,
        formatter: (value,index)=>{
          console.log(value,index);
          return `{a|${value}}`
        },
        rich: {
          a: {
            backgroundColor: 'red',
            padding: [2,5],
            height:24,
            verticalAlign: 'middle'
          }
        }
      },
      axisLine: {
        show:false
      },
      axisTick: {
        show:false
      },
    },
    {
      type: 'category',
      position: 'top',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      
      axisLabel: {
        show:true,
        margin: 40,
        formatter: (value,index)=>{
          console.log(value,index);
          return `{a|${value}}`
        },
        rich: {
          a: {
            backgroundColor: 'yellow',
            padding: [2,5],
            height:20,
            verticalAlign: 'middle'
          }
        }
      },
      axisLine: {
        show:false
      },
      axisTick: {
        show:false
      },
    },
  ] ,
  yAxis: [
    {
      type: 'value'
    },
  ],
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};