How to realize echarts dynamic time + time axis there is a prompt line in the middle of the time axis to display the value of the x-axis coordinate all the time.

the expected effect is as follows

the code now written

< html style= "height: 100%" >
< head >
< meta charset= "utf-8" >

< / head >
< body style= "height: 100%; margin: 0" >

<div style="height: 60%" id="container"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script src="echarts-all.js"></script>
<script type="text/javascript">
var thisURL = document.URL;
var getval = thisURL.split("?")[1];
var showval = getval.split("=")[1];
alert(showval)
var dom = document.getElementById("container");
var myline2 = echarts.init(dom);
option = null;
var d=new Date();

var olddate = new Date(d.getTime() - 5000);


var base = +olddate;
//
var oneDay = 1000;
var date = [];
var num = 0;

var data1 = [Math.random()];
var data2 = [Math.random()];

var now = new Date(base);

function addData(shift) {
    var strs=showval.split("-"); // 
    var tmp = [strs[0], strs[1], strs[2]].join("/") + "\n" + [ now.getHours(),  now.getMinutes(),  now.getSeconds()].join(":");
    date.push(tmp);
    data1.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);
    data2.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);
    if (shift) {
        date.shift();
        data1.shift();
        data2.shift();
    }
    now = new Date(+new Date(now) + oneDay);
}

for (var i = 1; i <= 25; iPP) {
    num = num + 1;
    addData();
}

var xcd="a"
option ={
    backgroundColor:["-sharpFFFFFF"],
   
    tooltip: {
        trigger: "axis"
    },
    legend: {
        x: "right",
        data:[xcd,"a"],
        textStyle:{
           
            fontsize:20
        }
    },
    xAxis: {
        axisLabel:{ 
            textStyle:{
              
            },
            interval:0,
        },
        axisLine: {
            lineStyle: {
                
            }
        },
        type: "category",
        boundaryGap: false,
        data: date
    },
    yAxis: {
        splitLine:{
            show:false,
        },
        boundaryGap: [0, "50%"],
        type: "value"
    },
    grid: {
        top:"3%",
        left: "1%",
        right: "5%",
        bottom: "5%",
        containLabel: true,
    },
    series: [
        {
            name:"a",
            type:"line",
            data:data2         
        },
    ]
};

setInterval(function () {
    addData(true);
    myline2.setOption({
        xAxis: {
            data: date
        },
        series: [
            {
                name: "a",
                data: data2,
            },
        ]
    });
   
}, 1000);
if (option && typeof option === "object") {
    myline2.setOption(option, true);
}

< / script >
< / body >
< / html >