echarts - 排行榜a

示例：

• 配置项

options = {
        grid: {
          left: -60, // 设为负值，与 yAxis 的 margin  调位置，解决左侧文字靠左对齐，过长显示省略号
          right: 10,
          bottom: 0,
          top: 0,
          containLabel: true,
        },
        series: [
          {
            type: "bar",
            // data: [291, 335, 405, 421, 576, 742, 801, 840, 913, 975],
            data: data.series,
            barCategoryGap: "80%" /*多个并排柱子设置柱子之间的间距*/,
            showBackground: true,
            barWidth: 10, // 柱子宽度
            itemStyle: {
              normal: {
                color: "#4ad2ff",
              },
            },
            backgroundStyle: {
              color: "rgb(14, 92, 111,0.2)",
            },
          },
        ],
        tooltip: {
          // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: "axis",
          backgroundColor: "rgba(32, 33, 36,.7)",
          borderColor: "rgba(32, 33, 36,0.20)",
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: "#fff",
            fontSize: "12",
          },
        },
        xAxis: {
          show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          axisTick: {
            show: false, //不显示坐标轴刻度线
          },
          axisLine: {
            show: false, //不显示坐标轴线
          },
          axisLabel: {
            show: false, //不显示坐标轴上的文字
          },
        },
        yAxis: [
          {
            type: "category",
            axisTick: { show: false },
            //开启鼠标事件！！这一句很重要
            triggerEvent: true,
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              // 强制显示所有标签
              interval: 0,
              margin: 80, // 左侧文字与盒子的距离
              textStyle: {
                align: "left",
              },
              color: "#fff", // 文字颜色
              // 文字省略
              formatter: function (value, index) {
                if (value.length > 3) {
                  return `${value.slice(0, 7)}...`;
                }
                return value;
              },
            },
            data: data.yAxis && data.yAxis[0].name,
            // data: [
            //   "10. SR测试设备",
            //   "09. SR测试设备",
            //   "08. SR测试设备",
            //   "07. SR测试设备",
            //   "06. SR测试设备",
            //   "05. SR测试设备",
            //   "04. SR测试设备",
            //   "03. SR测试设备",
            //   "02. SR测试设备",
            //   "01. SR测试设备",
            // ],
          },
          {
            type: "category",
            nameLocation: "end",
            position: "right",
            // offset: 30,
            axisLabel: {
              color: "#fff",
            },
            axisLine: {
              show: false,
            },
            axisTick: { show: false },
            data: data.yAxis && data.yAxis[0].data.map((v) => v + "人"),
            // data: [
            //   "291人",
            //   "335人",
            //   "405人",
            //   "421人",
            //   "576人",
            //   "742人",
            //   "801人",
            //   "840人",
            //   "913人",
            //   "975人",
            // ],
          },
        ],
      }