echarts横向柱状图TOP排名

echarts横向柱状图TOP排名

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

标签右对齐请参考上篇文章。

柱条添加颜色：

// 前三名添加颜色
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后的值是否是NaNif (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, // 是否显示数据阴影 默认autoshowDetail: false, // 即拖拽时候是否显示详细数值信息 默认truerealtime: true, // 是否实时更新startValue: 0, // 数据窗口范围的起始百分比endValue: 4 // 结束百分比（要显示几条数据）}
],

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

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