echarts-横向柱状图文案在柱子上方

先看代码

const box = document.querySelector('.box');
const e = echarts.init(box);
const yAxisDataLeft = ['TOP1', 'TOP2', 'TOP3', 'TOP4', 'TOP5'];
const yAxisDataRight = ['服装', '矿产', '服务业', '建筑业', '金融业'];
const option = {
  backgroundColor: '#031038',
  grid: {
    left: 40,
    bottom: -10,
    right: 70,
    top: 30,
  },
  yAxis: [
    {
      inverse: true,
      data: yAxisDataLeft,
      axisLabel: {
        show: true,
        inside: true,
        textStyle: {
          color: '#8db0ff',
          fontSize: 16,
          align: 'left',
        },
        formatter: '{value}\n{a|占位}\n{a|占位}',
        rich: {
          a: {
            color: 'transparent',
            lineHeight: 24,
          }
        }
      },
      //offset: 30,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    {
      inverse: false,
      data: yAxisDataRight,
      axisLabel: {
        inside: true,
        textStyle: {
          color: '#8db0ff',
          fontSize: 16,
          align: 'right',
        },
        formatter: '{value}\n{a|占位}\n{a|占位}',
        rich: {
          a: {
            color: 'transparent',
            lineHeight: 24,
            fontFamily: 'digital'
          }
        }
      },
      offset: 0,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      }
    }
  ],
  xAxis: {
    max: 120,
    show: false,
  },
  series: [
    {
      // 辅助系列
      type: 'bar',
      barGap: '-100%',
      silent: true,
      itemStyle: {
        color: 'rgba(255, 255, 254, 0.2)',
      },
      barWidth: 15,
      data: [120, 120, 120, 120, 120]
    },
    {
      type: 'bar',
      data: [120, 100, 90, 60, 30],
      barWidth: 15,
      label: {
        position: [10, 10],
        normal: {
          position: [800, -24],
          show: true,
          textStyle: {
            color: '#8db0ff',
            fontSize: 16,
          },
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            '#007AFF', '#00FFFF'
          ].map((color, offset) => ({
            color,
            offset
          })))
        }
      }
    }
  ]
};
e.setOption(option);

这个主要是利用yAxis左右两个 y 轴对应的axisLabel文案实现，当然yAxis右侧也可以放一些其它的数据指标。代码用的是echarts4.0版本，最新的5.0也是兼容的，直接复制粘贴到项目中即可！