登录  /  注册
首页 > web前端 > js教程 > 正文

echarts柱状图颜色设置:echarts柱状图如何设置不同颜色?(代码)

不言
发布: 2018-09-11 13:45:00
原创
86176人浏览过

有时候我们需要用echarts开发柱状统计图,但是如果柱子都是同一个颜色可能会看着“费劲”,但是如果柱状图中,代表不同意思的柱子用不同的颜色,那么看起来就会清晰很多,所以这篇文章给大家来介绍一下echarts柱状图如何设置不同颜色,话不多说,具体就来看下面的内容。

要知道Echarts商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。(要是不清楚echarts可以参考:echarts是什么?如何使用?echarts的介绍

我们来直接看一下代码:

xAxis : [
            {
                type : 'category',
//                 name:'额度',
        //这是设置的false,就不不显示下方的x轴,默认是true的
                show: false,
        //这里呢,就是每个柱的name了,根据实际情况下就好了,我就先写这三个
                data : ['最多','平均','最少'],
                axisLabel: {
             //这个是倾斜角度,也是考虑到文字过多的时候,方式覆盖采用倾斜
//                     rotate: 30,
            //这里是考虑到x轴文件过多的时候设置的,如果文字太多,默认是间隔显示,设置为0,标示全部显示,当然,如果x轴都不显示,那也就没有意义了
                    interval :0
                    }
            }
        ],
        yAxis : [
            {
                type : 'value',
                name:'数量',
          //下面的就很简单了,最小是多少,最大是多少,默认一次增加多少
                 min: 0,
                 max: 30,
                 interval: 6,
          //下面是显示格式化,一般来说还是用的上的
                 axisLabel: {
                     formatter: '{value} 包'
                 }
            }
        ],
        series : [
            {
                name: '数量',
                type: 'bar',
                itemStyle: {
                    normal: {
              //好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了,
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
              //以下为是否显示,显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',
//                             formatter: '{c}'
                            formatter: '{b}\n{c}'
                        }
                    }
                },
          //设置柱的宽度,要是数据太少,柱子太宽不美观~
          barWidth:70,
                data: [28,15,9,4,7,8,23,11,17]
            }
        ]
登录后复制

效果如下:

2345截图20180911112321.png

说明:其实还可以利用color来设置柱状图颜色,但是有时候color设置是没有效果的。所以就采用了上述方法。

本篇文章到这里就结束了,更多精彩内容可以关注php中文网。

相关推荐:

Echarts实现动态变色柱状图

echarts设置折线线条颜色和折线点颜色的实例

以上就是echarts柱状图颜色设置:echarts柱状图如何设置不同颜色?(代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号