echarts横向柱状图TOP排名

 需求和上一篇文章类似，只不过多了滚动条和标签颜色。

标签右对齐请参考上篇文章https://blog.csdn.net/chenlim87/article/details/126480580。

柱条添加颜色：

// 前三名添加颜色
for (let i = 0; i < this.TOPOption.series[1].data.length; i++) {
    if (i === 0) {
        this.TOPOption.series[1].data[i] = {
            value: this.TOPOption.series[1].data[i],
            itemStyle: {
                color: '#F95757'
            }
        }
    } else if (i === 1) {
        this.TOPOption.series[1].data[i] = {
            value: this.TOPOption.series[1].data[i],
            itemStyle: {
            color: '#FA8C16'
            }
        }
    } else if (i === 2) {
        this.TOPOption.series[1].data[i] = {
            value: this.TOPOption.series[1].data[i],
            label: {},
            itemStyle: {
               color: '#F7C739'
            }
        }
    } else {
        this.TOPOption.series[1].data[i] = {
            value: this.TOPOption.series[1].data[i],
            label: {},
            itemStyle: {
                color: '#4D8EFF'
            }
        }
      }
 }

TOP标签颜色设置（option中配置）：

axisLabel: {
    color: function (value, index) {
          // 为防止TOP1X,TOP2X等也变色，先判断TOPx后的值是否是NaN
          if (value && isNaN(Number(value.substring(4, 5)))) {
              if (value.substring(0, 4) === 'TOP1') {
                  return '#F95757'
              }
              if (value.substring(0, 4) === 'TOP2') {
                  return '#FA8C16'
              }
              if (value.substring(0, 4) === 'TOP3') {
                  return '#EFB40E'
              }
           }
           return '#666666'
    }
}

添加滚动条（option中配置）：

dataZoom: [
    {
        type: 'slider',
        width: 12,
        show: true,
        filterMode: 'empty',
        yAxisIndex: [0],
        left: '98%',// 滚动条位置
        handleSize: 0, // 滚动条两侧手柄的大小
        fillerColor: '#DADCE0',
        zoomLock: true, // 只能平移不能缩放

        // backgroundColor: '#f1f1f1',//两边未选中的滑动条区域的颜色
        showDataShadow: false, // 是否显示数据阴影 默认auto
        showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
        realtime: true, // 是否实时更新
        startValue: 0, // 数据窗口范围的起始百分比
        endValue: 4 // 结束百分比（要显示几条数据）
    }
],

图中排名是前30名，每页展示5条数据。如果数据小于等于5条，可以隐藏滚动条：

// 是否出现滚动条
this.TOPOption.dataZoom[0].show = this.TOPOption.series[1].data.length > 5