叠加柱状图echarts 柱状配置项内容和展示

      var xAxisData =  ['1','2','3','4','5','6'];

var emphasisStyle = {
    itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0,0,0,0.3)'
    }
};

option = {
    backgroundColor:'rgba(3, 4, 24, 1)',
    color:['rgba(18, 48, 157, 1)','rgba(53, 93, 229, 1)','rgba(2, 165, 240, 1)','rgba(76, 255, 249, 1)',],
    dataZoom: {
        type: 'slider',
        show: true,
        start: 0,
        end: 100,
        height: 6, // 这里可以设置dataZoom的尺寸
        bottom: 16,
    },
    grid: {
        top: '10',
        left: '10',
        right: '10',
        bottom: '26',
        containLabel: true,
    },

    xAxis: {
        data: xAxisData,
         boundaryGap: true,
        axisLine: {
            show: false,
        },
        axisLabel: {
            textStyle: {
                color: '#959FA9',
                fontSize: 14
            },
        },
        axisTick: {
            show: false,
        },
    },
    yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            // type: 'dashed',
                            color: 'rgba(39, 41, 58, 0.3)',
                            width: 1
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgb(2,185,208)',
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#959FA9',
                            fontSize: 14
                        },
                    },
                },

    series: [
        {
            name: 'bar',
            type: 'bar',
            stack: 'stack',
            barWidth:30,
            label: {
                show: true,
                color:'#FFFFFF',
                position: 'inside'
            },
            emphasis: emphasisStyle,
            data: [60,80,100,83,29,30,30]
        },
        {
            name: 'bar2',
            type: 'bar',
            stack: 'stack',
            barWidth:30,
            label: {
                show: true,
                color:'#FFFFFF',
                position: 'inside'
            },
            emphasis: emphasisStyle,
            data: [50,80,100,83,29,30,30]
        },
        {
            name: 'bar3',
            type: 'bar',
            stack: 'stack',
            barWidth:30,
            label: {
                show: true,
                color:'#FFFFFF',
                position: 'inside'
            },
            emphasis: emphasisStyle,
            data: [30,80,100,83,29,30,30]
        },
        {
            name: 'bar4',
            type: 'bar',
            stack: 'stack',
            barWidth:30,
            label: {
                show: true,
                color:'#FFFFFF',
                position: 'inside'
            },
            emphasis: emphasisStyle,
            data: [20,80,100,83,29,30,30]
        }
    ]
};