echarts柱状图重合，复合

复合：

var option = {
        color:["#7179CB","#4CCEFE"],
        title: {
            text:"统计总量",
            textStyle:{
                fontSize:16,
                padding:"10px"
            }
        },
        legend: {
            data: ["总量", "分量"],
        },
        tooltip: {},
        xAxis: {
            data: ['a','b','c','d']

        },
        yAxis: {
            splitArea: {show: false}
        },

        series: [
            
            {
                barWidth: 20,
                data:  ["147", "159", "195", "124",],
                name: "总量",
                type: "bar",
                itemStyle: {
							normal: {
							     color: 'rgba(0,255,0,0.4)',
								label: {
									show: true, //开启显示
									position: [30,0], //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
                },
            },
            {
                barGap: "-100%", /*这里设置包含关系，只需要这一句话*/
                barWidth: 20,
                data: ["100", "124", "143", "150", ],
                name: "分量",
                type: "bar",
                 itemStyle: {
							normal: {
							    color: 'rgba(46,139,87,0.4)',
								label: {
									show: true, //开启显示
									position: [30,0], //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
                },

                
            }
        ]
    };

 

 

2.复合重合

 var dataMoney = [0, 20, 40, 60, 80, 100, 120, 140, 160];//y轴
 
    var dataMouth = ['1月','2月','3月','4月'];//x轴
 
    //显示数据，可修改
    var data1 = [22, 24, 38, 43];
    var data2 = [135, 146, 143, 59];
    //总计
    var data3 = function() {
        var datas = [];
        for (var i = 0; i < data1.length; i++) {
 
            datas.push(data1[i] + data2[i]);
        }
        return datas;
    }();
    option = {
        title: {
            text: '标题栏',
            left: 'center',
            top: 'top',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {          
                type : 'shadow'     
            }
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            y: 'top',
            data:['料费','工费']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : dataMouth,
            }
        ],
        yAxis : [
            {
                type : 'value',
                data : dataMoney //可省略，只要type : 'value',会自适应数据设置Y轴
            }
        ],
        series : [
            {
                barGap: "-100%", /*这里设置包含关系，只需要这一句话*/
                barWidth: 20,
                data: ["100", "124", "143", "150", ],
                name: "分量",
                type: "bar",
                 itemStyle: {
							normal: {
							    color: 'rgba(46,139,87,0.4)',
								label: {
									show: true, //开启显示
									position: [30,0], //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
                },

                
            },
            {
                name:'料费',
                type:'bar',
                stack:'sum',
                itemStyle:{
                    normal:{
                        label: {
                            show: true,//是否展示
                        },
                        color:'#F89733'
                    }
                },
                data:data1
            },
            {
                name:'工费',
                type:'bar',
                stack:'sum',
                barWidth : 20,
                itemStyle:{
                    normal:{
                        label: {
                            show: true,//是否展示
                        },
                        color:'#DF7010'
                    }
                },
                data:data2
            },
            {
                name: '总计',
                type: 'bar',
                stack: 'sum',
                label: {
                    normal: {
                        // offset:['50', '80'],
                        show: true,
                        position: 'insideBottom',
                        formatter:'{c}',
                        textStyle:{ color:'#000' }
                    }
                },
                itemStyle:{
                    normal:{
                        	position: [30,0], //在上方显示
                        color:'rgba(128, 128, 128, 0)'
                    }
                },
                data: data3
            }
 
        ]
    };

 

 

 

复合调整数字显示位置

 

var dataMoney = [0, 20, 40, 60]; //y轴
var dataMouth = ['第一个月', '第二个月', '第三个月', '第四个月']; //x轴
//显示数据，可修改
var data1 = [500, 600, 500, 200]; //实际收入
var data2 = [100, 0, 0, 0]; //超额完成
var data4 = [500, 800, 1000, 600]; //未完成


//总计
var data3 = function() {
    var datas = [];
    for (var i = 0; i < data1.length; i++) {
        datas.push(data1[i] + data2[i]);
    }
    return datas;
}();


    // 显示标题，图例和空的坐标轴
    option ={
        title: {
            // text: '销售'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            y: '3%',
            x: '20%',
            data: ['实际收入', '超额完成', '未完成'],
            textStyle: {
                color: '#808080' //字体颜色
            },
            itemWidth: 12,
            itemHeight: 12,
            itemWidth: 12,
            itemHeight: 12,
        },
        grid: {
            left: '2%',
            right: '7%',
            bottom: '6%',
            top: '15%',
            containLabel: true,
        },
        xAxis: [{
            type: 'category',
            data: dataMouth,
        }],
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: '#E3E3E3'
                }
            },
        },
        series: [{
                barGap: "-100%",
                /*这里设置包含关系，只需要这一句话*/
                barWidth: "13%",
                data: data4,
                name: "未完成",
                type: "bar",
                itemStyle: {
                    normal: {
                        color: '#E9E9E9',
                        label: {
                            show: true, //开启显示
                            position: ['130%', '0%'], //在上方显示
                            textStyle: { //数值样式
                                 color: 'rgba(128, 128, 128, 0.8)'
                            }
                        }
                    }
                },
            },
            {
                name: '实际收入',
                type: 'bar',
                stack: 'sum',
                barWidth: "13%",
                color: "#30D39C",
                data: data1,
                itemStyle: {
                    normal: {
                        label: {
                            show: false, //是否展示
                        },
                    }
                }
            }, {
                name: '超额完成',
                type: 'bar',
                stack: 'sum',
                data: data2,
                color: "#1BA778",
                barWidth: "13%",
                itemStyle: {
                    normal: {
                        label: {
                            show: false, //是否展示
                        },
                    }
                }
            }, {
                name: '总计',
                type: 'bar',
                stack: 'sum',
                label: {
                    normal: {
                        // offset:['50', '80'],
                        show: true,
                        // position: 'outsideBottomRight',
                        // position: 'insideBottomRight',
                        position: ['130%','100%'],
                        // distance:-25,
                        formatter: '{c}',
                        textStyle: {
                            color: '#000'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        // position: [30,0], //在上方显示
                        color: 'rgba(128, 128, 128, 0)'
                    }
                },
                data: data3
            }
        ]
    };