遇到一个有点意思的需求，记录一下：
要根据排名上升配置颜色渐变
首先我们使用一般条形图正常情况下会出来这个样子
1533696083(1).png
然后我们发现一个问题，正常情况下，排名是越高越好，应该是第3名慢慢的往第1名提高的，上面这个情况就不对了，感觉是是Y轴数据的问题，那我们使用inverse:true去设置一下Y轴数据，
yAxis: {
type: 'value',
inverse:true
}
得到这个样子
1533696329(1).png
显然这也不是我们想要的
那就不能使用inverse:true了，那我们有什么办法去改变Y轴的数据显示呢，接下来试一试Y轴axisLabel的formatter属性，通过这个axisLabel属性去更改Y轴数值的显示
yAxis: {
type: 'value',
axisLabel: {
formatter: (value, index) => {
return (3 - value)
}
}
}
得到的效果是这样的
1533696526(1).png
这就跟我们预期的需求比较接近了，接下来就是进行一些简单的调整就可以了
网友评论