柱状图数据堆叠后， 如何增加 stack 的label 在下方echarts 柱状配置项内容和展示

想使用柱状图将相关的数据堆叠在一起， 但是目前无法显示stack 的标签在下方， 大家谁有什么好办法解决？ 虽然该图中，我通过增加了一个xAxis，显示了一些。但是有几个问题： 1.数据需要根据横坐标数重复。 2. 位置无法与bar对应起来。 谢谢！

      option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: [{
            type: 'category',
            offset: 60,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        {
            type: 'category',
            offset: -650,
            data: ['直接访问', {
                value: '广告',
                textStyle: {
                    fontSize: 20,
                    color: 'red',
                    align: 'top'
                }
            }, '搜索引擎', '直接访问', {
                value: '广告',
                textStyle: {
                    fontSize: 20,
                    color: 'red',
                    align: 'top'
                }
            }, '搜索引擎', '直接访问', {
                value: '广告',
                textStyle: {
                    fontSize: 20,
                    color: 'red',
                    align: 'top'
                }
            }, '搜索引擎', '直接访问', '广告', '搜索引擎', '直接访问', '广告', '搜索引擎', '直接访问', '广告', '搜索引擎', '直接访问', '广告', '搜索引擎', '直接访问', '广告', '搜索引擎'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                rotate: 90,
                color: 'green',
                align: 'top'
            }
        }

    ],
    yAxis: [{
        type: 'value',
        min:200
    }],
    series: [{
            name: '直接访问',
            type: 'bar',
            stack: '直接访问',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '广告',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '广告',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '广告',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '搜索引擎',
            type: 'bar',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
        },
        {
            name: '百度',
            type: 'bar',
            barWidth: 5,
            stack: '搜索引擎',
            data: [620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name: '谷歌',
            type: 'bar',
            stack: '搜索引擎',
            data: [120, 132, 101, 134, 290, 230, 220]
        },
        {
            name: '必应',
            type: 'bar',
            stack: '搜索引擎',
            data: [60, 72, 71, 74, 190, 130, 110]
        },
        {
            name: '其他',
            type: 'bar',
            stack: '搜索引擎',
            data: [62, 82, 91, 84, 109, 110, 120]
        }
    ]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}