一、实现效果

使用echarts的柱状图实现下面效果，须在名称前面添加序号：

二、核心代码（图片序号）

核心代码在于配置属性中的 axisLabel，需要formatter 和 rich 属性配合，注意看代码注释
formatter中格式化为 {a1| 张三 }
然后rich中通过匹配 a1来配置序号样色，这里使用了图片，所以 backgroundColor 里设置image路径即可

this.chartOption = {
        yAxis: {
          ......
          axisLabel: {
            color: '#D8D9D9',
            margin: 90, // 距离右侧图形距离，配合axisLabel.left 和 grid.left 使用

            // 必须使用formatter，配合rich使用
            formatter: (params, index) => {
              return [`{a${index + 1}|}    ${params}`].join('\n')
            },
            align: 'left', // 文字左排序
            rich: {
              a1: {
                backgroundColor: { image: '图片路径' }, // 序号元素
                width: 18, // 序号元素宽
                height: 18, // 序号元素高
              },
              ......
            },
          },
        },

三、核心代码（文字序号）

如果序号不用图片，而是常规的文字序号，也是可以的，效果如下：

其中 formatter中格式化为 {a1|1 张三 }，| 线后的1就是文字序号了，然后通过rich的各种属性配置风格

核心代码如下

this.chartOption = {
        yAxis: {
          ......
          axisLabel: {
            color: '#D8D9D9',
            margin: 90, // 距离右侧图形距离，配合axisLabel.left 和 grid.left 使用

            // 必须使用formatter，配合rich使用
            formatter: (params, index) => {
              return [`{a${index + 1}|${index + 1}}    ${params}`].join('\n')
            },
            align: 'left', // 文字左排序
            rich: {
              a1: {
                color: '#fff',
                backgroundColor: 'red',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4,
              },
              ......
            },
          },
        },

四、源码（这里用了vue）

export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  created() {
    this.chartId = 'chart-PersonalRanking' // 图表对象Id
    this.chart = null // echart 对象
    this.chartOption = {} // echart 配置项
    this.inv = null // 计时器，每隔x秒拉一次数据

    // 排序图标
    this.rankIcons = [
      require('@/assets/images/data-panel/rank1.png'),
      require('@/assets/images/data-panel/rank2.png'),
      require('@/assets/images/data-panel/rank3.png'),
      require('@/assets/images/data-panel/rank4.png'),
      require('@/assets/images/data-panel/rank5.png'),
    ]

    // 排序图标大小
    this.rankIconsSize = 18
  },
  mounted() {
    this.init()
    this.update()
    this.inv = setInterval(this.update, 10000)
  },
  beforeDestroy() {
    clearInterval(this.inv)
    window.removeEventListener('resize', this.chartsResize)
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    // 更新
    update() {
      console.log('个人任务排名-每隔10秒更新数据')
      const xData = [120, 200, 150, 80, 70]
      const yData = ['张三', '李四', '王小五', '赵六', '张三丰']

      // 更新在线图表
      this.chartOption.yAxis.data = yData
      this.chartOption.series[0].data = xData
      this.chart.setOption(this.chartOption)
    },

    // 初始化
    init() {
      this.chartOption = {
        yAxis: {
          type: 'category',
          inverse: true, // 反向坐标
          data: [],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#D8D9D9',
            margin: 90, // 距离右侧图形距离，配合axisLabel.left 和 grid.left 使用

            // formatter必须，配合rich使用
            formatter: (params, index) => {
              return [`{a${index + 1}|}    ${params}`].join('\n')
            },
            align: 'left', // 文字左排序
            rich: {
              a1: {
                backgroundColor: { image: this.rankIcons[0] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
              a2: {
                backgroundColor: { image: this.rankIcons[1] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
              a3: {
                backgroundColor: { image: this.rankIcons[2] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
              a4: {
                backgroundColor: { image: this.rankIcons[3] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
              a5: {
                backgroundColor: { image: this.rankIcons[4] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
            },
          },
        },
        xAxis: {
          show: false,
          type: 'value',
        },
        color: ['#898FFC'],
        grid: {
          left: 110,
          top: 0,
          right: 20,
          bottom: 10,
        },
        tooltip: {
          show: true,
          backgroundColor: 'rgba(0,0,0,.7)',
          borderWidth: 0,
          textStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#292B30',
              borderRadius: 100,
            },
            barWidth: 6,

            itemStyle: {
              borderRadius: 100,
            },
          },
        ],
      }
      this.chart = this.$echarts.init(document.getElementById(this.chartId))
      window.addEventListener('resize', this.chartsResize)
    },

    // 图表调整尺寸
    chartsResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
  },
}

如果帮到你，点个赞再走