echarts柱状图如何在最顶部显示数字

Question

有一张这样的设计图，需要在最顶部显示数字

现在我能做到的只有这样，在柱子上方显示，并不能在最顶部显示

如何进行配置，可以让label在最顶部进行显示呢？

Answer 1

可以延迟计算grid高度，然后使用position: 'bottom'加上offset偏移进行定位。

这里主要就是top和bottom的计算，因为grid的top等属性可以设置具体像素值/百分比/关键字等，所以这个判断比较麻烦，上面因为我写的是百分比，所以直接按百分比处理了，你可以多做些判断进行处理。

另外，网上也有其他的解决方法，你也可以参考下Echarts 添加多个 label 与动态调整 position 的方案

Answer 2

series: [
    {
        ...
        label: {
            show: true,
            position: 'top'
        },
        ...
    }
]

Answer 3

可以再多一条x轴显示在最上方

{
      axisTick: "none",
      axisLine: "none",
      axisLabel: {
        textStyle: {
          color: "red",
          fontSize: "16",
        },
      },
      data: [ "7", "6", "5", "4", "3", "2", "1"],
    },