start

最近接到需求希望柱狀圖

1. y軸最大高度可以略高一些；
2. 柱狀圖的數(shù)據(jù)能展示在柱狀圖的上方

記錄一下相關(guān)配置項

解決方案

官方文檔說明

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

效果

代碼

{
  key: 'business',
  title: {
    text: '業(yè)務領(lǐng)域分類',
    textStyle: {
      fontSize: 16
    },
    padding: [20, 32]
  },
  color: ['#A4CDEB', '#F2D378'],
  legend: {
    bottom: '10%'
  },
  tooltip: {
    trigger: 'item',
    formatter: ' : {a} 數(shù)量{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: {
              // 數(shù)值樣式
              color: '#6E7079',
              fontSize: 14
            }
          }
        }
      }
    }
  ]
}

解釋