echarts 柱状图柱子上显示数值

在echarts柱状图中，可以通过设置itemStyle的label属性来显示柱子上的数值。具体的代码如下所示：

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

这样设置之后，柱子的顶部会显示当前纵坐标的数值。[1]

如果你想要在顶端的数值后面加上单位，可以在formatter函数中进行判断，如果数值为0，则返回空字符串，否则返回数值加上单位。代码如下所示：

series: [{
  type: 'bar',
  data: datay,
  color: '#5FD990',
  itemStyle: {
    normal: {
      label: {
        show: true, // 开启显示
        position: 'top', // 在上方显示
        formatter: function(val) {
          if (val.value === 0) {
            return "";
          } else {
            return val.value + ' 单位';
          }
        },
        textStyle: { // 数值样式
          color: 'black',
          fontSize: 12
        }
      }
    }
  }
}]

这样设置之后，柱子顶部的数值会根据判断是否为0来显示不同的内容。[1] [2]