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

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


版权声明:本文为lu_wei_shuai原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。