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]

            }

        ]```

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值