层叠柱形图,随时间更新数据echarts 配置项内容和展示

配置项如下
      option = {
    "tooltip":{
        "trigger":"axis"
    },
    "grid":{
        "containLabel":true,
        "left":0,
        "right":0,
        "bottom":0,
        "top":45
    },
    "legend":{
        "left":"center",
        "top":"top"
    },
    "xAxis":{
        "type":"category",
        "data": getXAxisData()
    },
    "yAxis":{
        "type":"value",
        "splitLine":{
            "lineStyle":{
                "type":"dashed",
                "color":"#DDD"
            }
        },
        "name":"次数/秒"
    },
    "series":[
        {
            "name":"APP 实时总访问频率",
            "type":"bar",
            "barMaxWidth":50,
            "stack":"总量",
            "label":{
                "show":true,
                "fontSize":18,
                "position":"inside",
                "formatter":{
                    "_custom":{
                        "type":"function",
                        "display":"<span>ƒ</span> formatter(parms)"
                    }
                }
            },
            "z":2,
            "data":[
                27,
                29,
                33,
                28,
                33,
                25,
                25,
                13,
                8,
                96]
        },
        {
            "name":"第三方 实时总访问频率",
            "type":"bar",
            "barMaxWidth":50,
            "stack":"总量",
            "label":{
                "show":true,
                "fontSize":18,
                "position":"inside",
                "formatter":{
                    "_custom":{
                        "type":"function",
                        "display":"<span>ƒ</span> formatter(parms)"
                    }
                }
            },
            "z":1,
            "data":[
                29,
                35,
                33,
                33,
                26,
                30,
                30,
                60,
                27,
                35]
        }]
}

function getXAxisData () {
    let data = []
    let now = Date.now()
    for (var i = 9; i >= 0; i--) {
        data.push(new Date(now - 3 * i * 1000).toTimeString().substring(0,8))
    }
    return data
}


setInterval(() => {
    
    if (option.xAxis.data.length >= 10) {
      option.xAxis.data.shift()
      option.series[0].data.shift()
      option.series[1].data.shift()
    }

    option.xAxis.data.push( new Date().toTimeString().substring(0,8) )

    option.series[0].data.push(parseInt(Math.random() * 100))
    
    option.series[1].data.push(parseInt(Math.random() * 100))
 
    myChart.setOption(option)
}, 3000)
    
截图如下