echarts排行榜，类目名字在柱子上方全部显示，前三名序号使用自定义图片背景

使用echarts图表开发排行榜时，由于类目轴数据名称过长导致实例展示效果很差，产品要求将类目名称在柱子上方显示，排列序号在柱子左边显示，前三名使用自定义图片。效果如下图所示：

 

上述效果实现思路：

1、首先配置出类目轴在柱子上方，序号自定义的实例，可以通过左边序号通过yAxis的配置项axisLabel中rich来实现，柱子上方的类目名称通过series的label配置项来实现，具体效果如下：

具体配置项如下：

    var yData = [
      "我是第一名但是我的名字很长",
      "我是第二名我的名字也很长我是第二名我的名字也很长",
      "我是第三名我的名字也很长我是第三名我的名字也很长我是第三名我的名字也很长",
      "我是第四名我的名字也很长我是第四名我的名字也很长我是第四名我的名字也很长",
      "我是第五名我的名字也很长我是第五名我的名字也很长我是第五名我的名字也很长",
    ];
    var seriesData = [300, 289, 276, 250, 230];
    option = {
      tooltip: {
        trigger: "item",
        formatter: (p) => {
          if (p.seriesName === "total") {
            return "";
          }
          return `${p.name}<br/>访问量: ${p.value}`;
        },
      },
      legend: {
        show: false,
      },
      grid: {
        left: 50,
        top: 36,
        right: 50,
      },
      xAxis: {
        type: "value",
        name: "访问量/次",
        nameLocation: "end",
        nameTextStyle: {
          fontSize: 14,
          color: "#666666",
          padding: [60, 0, 0, -65],
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: "#555555",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#e2e4e8",
          },
        },
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisPointer: {
            label: {
              show: false,
              margin: 30,
            },
          },
          data: yData,
          axisLabel: {
            margin: 40,
            fontSize: