eachars动态的改变柱状图的颜色

生活中,最使人疲惫的往往不是道路的遥远,而是心中的郁闷;最使人痛苦的往往不是生活的不幸,而是希望的破灭;最使人颓废的往往不是前途的坎坷,而是自信的丧失;最使人绝望的往往不是挫折的打击,而是心灵的死亡。所以我们要有自己的梦想,让梦想的星光指引着我们走出落漠,走出惆怅,带着我们走进自己的理想。

导读:本篇文章讲解 eachars动态的改变柱状图的颜色,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

开发中会遇到这种情况:

只有一个类型,但是想实现不同的颜色展示,如图:
eachars动态的改变柱状图的颜色

这种给人感觉很不舒服,这时候,需要给柱体颜色动态的变动;在绑定数据的X轴哪里,eachars提供了一个itemStyle属性,不过这个属性得我们自己去写:下图中,红色框部分即可改变柱体的颜色
eachars动态的改变柱状图的颜色

代码:
 

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];
                            }
                        }
                    }

这样,就算你只有一个类型,也可以动态的变动颜色了,

eachars动态的改变柱状图的颜色 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/137533.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!