echart柱形图-一条柱子显示多个数据

personCountOption = {
    backgroundColor:'#fff',
    tooltip: {
        trigger: 'item',
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        },
        padding: 10,
        formatter: function(params) {
            return params.name + '</br>' + '总&emsp;数:' + params.value + '</br>' + '待处理:' + params.data.cost + '<br/>'  + '已授权:' + params.data.early + '<br/>' + '已拒绝:' + params.data.index + '<br/>' + '回收授权:' + params.data.cur
        }
    },
    xAxis   : [
        {
            type : 'category',
            axisLine:{
                show:false,
                lineStyle:{
                    color:'#DDDDDD',
                    width:0
                }
            },
            splitLine:{
                show:false
            },
            axisTick:{
                show:false
            },
            axisLabel:{
                show:false,
                textStyle:{
                    color:'#999'
                }
            },
            data: function () {
                var list = [];
                for(var i = 1;i<=12;i++){
                    list.push(i+'月份');
                }
                return list;
            }()
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLine:{
                show:false,
                lineStyle:{
                    color:'#DDDDDD',
                    width:1
                }
            },
            splitLine:{
                show:false
            },
            axisLabel:{
                show:false,
                textStyle:{
                    color:'#999'
                }
            }
        }
    ],
    grid: {
        x: 45,
        x2: 15,
        y: 25,
        y2: 15,
        backgroundColor:'#fff',
        borderWidth: 0
    },
    series: [{
        name: '指标',
        type: 'bar',
        // barWidth: 20,
        itemStyle:{
            normal:{
                barBorderRadius: 5,
                color: function(params) {
                    var colorList = [     //柱子颜色
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001'
                    ];
                    return colorList[params.dataIndex]
                }
            },
            emphasis:{
                barBorderRadius: 5
            }
        },
        data: [{
            value: 20,
            cost: 4,
            early: 6,
            index: 2,
            cur:1
        }, {
            value: 15,
            cost: 4,
            early: 6,
            index: 2,
            cur:1
        }, {
            value: 18,
            cost: 4,
            early: 6,
            index: 2,
            cur:1
        }, {
            value: 10,
            cost: 4,
            early: 6,
            index: 2,
            cur:1
        },{
            value: 13,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 13,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 14,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 13,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 16,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 25,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 21,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        },{
            value: 14,
            cost: 4,
            early: 6,
            index: 2,
            cur:0
        }
        ]
    }]
};
附图:
  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值