echarts堆叠柱状图显示总数

直接写代码吧

	
            var data1 = [2,0,0,0,0,0,1,0,0,0,1,2,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0];
            var data2 = [5,1,3,0,0,0,2,10,0,6,3,10,5,8,1,0,0,12,5,6,9,3,8,0,0,0];
            var data3 = [0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0];
            var data4 = [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0];
            var data5 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

            var data6 = function() {
                var datas = [];
                for (var i = 0; i < data1.length; i++) {
                    datas.push(data1[i] + data2[i] + data3[i] + data4[i] + data5[i]);
                }
                return datas;
            }();

            option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                        type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                    }
                },
                legend: {
                    show: false,
                    data: ['title1', 'title2','title3','title4','title5'],
                    textStyle:{//图例文字的样式
                        color:'#fff',
                    }
                },
                grid:{
                    x:35,
                    x2:15,
                    y:25,
                    y2:28
                },
                //横坐标
                xAxis: [
                    {
                        type: 'category',
                        data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                            show:false
                        },
                    },
                ],
                //纵坐标,最小值为0,最大值为实际的1.5倍
                yAxis:
                    {
                        type: 'value',
                        min: 0,
                        max: function(value){
                            return value.max * 1.5;
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            }
                        }
                    },


                series: [
                    {
                        name:'title1',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data:data1
                    },
                    {
                        name:'title2',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#548dd5'
                            }
                        },
                        data:data2
                    },
                    {
                        name:'title3',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data:data3
                    },
                    {
                        name:'title4',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data:data4
                    },
                    {
                        name:'title5',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data:data5
                    },
                    {
                        name: '总计',
                        type: 'line',
                        lineStyle:{
                            opacity : 0,
                        },
                        label:{
                            show: true,
                            textStyle:{
                                color:'#fff'
                            }
                        },
                        data: data6
                    }
                ]
            };

效果就像这样 最后的总数浮在每个柱状图的上方
效果就像这样

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值