echarts記錄篇(一)：使用柱狀圖實現排名前邊有排序數字

一、效果如圖：

 二、直接上代碼

yAxis: {
      inverse: true, //如果數據數組倒置排序，加上此代碼
      data: categories1,
      offset: 0,
      axisLabel: {
        fontSize: 18,
        color: "#5DB3DC",
        margin: 130, // 距離右側圖形距離，配合axisLabel.left 和 grid.left 使用
        align: "left",
        rich: {
          a1: {
            color: "#fff",
            backgroundColor: "#EA2739",
            width: 18,
            height: 18,
            align: "center",
            borderRadius: 4,
          },
          a2: {
            color: "#fff",
            backgroundColor: "#FF8C40",
            width: 18,
            height: 18,
            align: "center",
            borderRadius: 4,
          },
          a3: {
            color: "#fff",
            backgroundColor: "#FFC600",
            width: 18,
            height: 18,
            align: "center",
            borderRadius: 4,
          },
          a4: {
            color: "#fff",
            backgroundColor: "#3C7DF9",
            width: 18,
            height: 18,
            align: "center",
            borderRadius: 4,
          },
        },
        formatter: (params, index) => {
          console.log(params, "啦啦哈");
          // ${" ".repeat(5)} 是添加5個空格
          let result;
          if (index == 0) {
            result = `{a1|${index + 1}}${" ".repeat(2)}${params}`;
          } else if (index == 1) {
            result = `{a2|${index + 1}}${" ".repeat(2)}${params}`;
          } else if (index == 2) {
            result = `{a3|${index + 1}}${" ".repeat(2)}${params}`;
          } else {
            result = `{a4|${index + 1}}${" ".repeat(2)}${params}`;
          }
          return result;
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        //修改背景線條樣式
        show: false,
      },
    },

主要通過formatter和rich配合而成；在配置yAxis<axisLabel中寫下此代碼。