echarts横向柱状图TOP排名

lamCCH

已于 2022-08-23 15:51:54 修改

阅读量4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： echarts使用心得文章标签： python 开发语言

于 2022-08-23 14:07:28 首次发布

本文链接：https://blog.csdn.net/chenlim87/article/details/126482516

echarts使用心得专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Echarts图表中添加滚动条、设置柱状图颜色以及调整TOP标签的颜色。通过示例代码展示了如何针对前3名的数据设置不同颜色，并实现轴标签颜色的动态变化。同时，提供了根据数据量控制滚动条显示的逻辑，确保只有当数据超过一定数量时才会显示滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

标签右对齐请参考上篇文章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