echarts横向柱状图TOP排名

原创

已于 2022-08-23 15:51:54 修改 · 4.3k 阅读

收录于

当前文章被以下社区和专栏收录：

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

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

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

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

标签