echart 设置柱状图y轴最大刻度

start

最近接到需求希望柱状图

1. y轴最大高度可以略高一些；
2. 柱状图的数据能展示在柱状图的上方

记录一下相关配置项

解决方案

官方文档说明

https://echarts.apache.org/zh/option.html#xAxis.max

效果

代码

{
    
    
  key: 'business',
  title: {
    
    
    text: '业务领域分类',
    textStyle: {
    
    
      fontSize: 16
    },
    padding: [20, 32]
  },
  color: ['#A4CDEB', '#F2D378'],
  legend: {
    
    
    bottom: '10%'
  },
  tooltip: {
    
    
    trigger: 'item',
    formatter: '{b} : {a} 数量{c}'
  },
  xAxis: {
    
    
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    
    
    type: 'value',
    max: function (value) {
    
    
      return value.max + value.max * 0.2
    }
  },

  series: [
    {
    
    
      type: 'bar',
      data: [],
      itemStyle: {
    
    
        normal: {
    
    
          label: {
    
    
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: {
    
    
              // 数值样式
              color: '#6E7079',
              fontSize: 14
            }
          }
        }
      }
    }
  ]
}

解释