开发中会遇到这种情况:
只有一个类型,但是想实现不同的颜色展示,如图:
这种给人感觉很不舒服,这时候,需要给柱体颜色动态的变动;在绑定数据的X轴哪里,eachars提供了一个itemStyle属性,不过这个属性得我们自己去写:下图中,红色框部分即可改变柱体的颜色
代码:
itemStyle: {
normal: {
color: function(params) {
var index = params.dataIndex; //得到当前数据的下标
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#8A8A8A','#8B4500','#436EEE'
,'#4A4A4A','#0000AA','#218868','#63B8FF','#737373','#7FFF00','#8B0000','#8B8682','#BCD2EE','#EEE9BF'];
//如果数据大于了了颜色长度,则将大于部分的颜色重新再颜色list里面定义
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
//返回每个下标对应的颜色
return colorList[index];
}
}
}
这样,就算你只有一个类型,也可以动态的变动颜色了,
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/137533.html