Dynamic refresh of Echarts markPoint time

for example, the time in the frame is refreshed in seconds
clipboard.png

Code:

< html style= "height: 100%" >

< head >
< meta charset= "utf-8" >
< script src= "js/jquery.min.js" > < / script >
< link rel= "stylesheet" href= "bootstrap/css/bootstrap.css" >
< script src= "bootstrap/js/bootstrap.min.js" > < / script >

< script

src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

< script type= "text/javascript"

src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

< script type= "text/javascript"

src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>

< script type= "text/javascript"

src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>

< script type= "text/javascript"

src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>

< script type= "text/javascript"

src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>

< script type= "text/javascript"

src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>

< script type= "text/javascript"

src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>

< script type= "text/javascript"

src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

< script type= "text/javascript"

src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

< / head >

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

<div id="main" style="height: 60%"></div>
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" onclick="gettable()">Go!</button>
            </span> <input type="text" class="form-control" placeholder=""
                id="table">
        </div>
        <!-- /input-group -->
    </div>
</div>
<script>
    
    var myChart = echarts.init(document.getElementById("main"));
    var count = 0;
    var newtime = null;
    myChart.showLoading({
        text : "...", //loading
    });
    function countTime() {  
        //  
        var date = new Date();  
        var now = date.getTime();  
        //  
        var str="2018/10/25 20:30:00";
        var endDate = new Date(str); 
        var end = endDate.getTime();  
        //  
        var leftTime = end-now; 
        // d,h,m,s  
        var d,h,m,s;  
        if (leftTime>=0) {  
            d = Math.floor(leftTime/1000/60/60/24);  
            h = Math.floor(leftTime/1000/60/60%24);  
            m = Math.floor(leftTime/1000/60%60);  
            s = Math.floor(leftTime/1000%60);   
                
        }  
       
        return   d+""+h+""+m+""+s+""; 
        //countTime  
                   
    }
    
    var option = {
            
        title : {
            text : "111"
        },
        
        tooltip : {
            trigger : "axis", //xy            
        },
        legend : {
            data : [ "" ]
        },
        grid : {
            left : "3%",
            right : "4%",
            bottom : "3%",
            containLabel : true
        }, //
        xAxis : [ {
            
        } ],
        
        yAxis : {},
        series : [ {
            name : "",
            type : "line",
            itemStyle : {
                normal : {
                    color : "-sharp47b34f",
                    lineStyle : {
                        color : "-sharp47b34f"
                    }
                }
            //
            },
            markPoint: {
                symbol: "path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z",
                data:[{name : "S", value : "ECB\n2018-10-25\t20:30\n:"+ countTime(),  coord: [800, 3]}],

            },
                            
        } ],
        
        dataZoom : [ {
            type : "slider",//
            start : 0,
            minSpan : 8, //5min
            dataBackground : {
                lineStyle : {
                    color : "-sharp95BC2F"
                },
                areaStyle : {
                    color : "-sharp95BC2F",
                    opacity : 1,
                }
            },
        }, {
            type : "inside"//
        } ],
        
    };
    
    function gettable() {
        var tablename = $("-sharptable").val();
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var date1 = date.getDate();
        
        $.ajax({
            url : "gettable/" + tablename,
            type : "get",
            async : false, //
            dataType : "json", //json
            success : function(result) {
                if (result) {
                    //option.xAxis[0]data
                    option.xAxis[0].data = [];
                    for (var i = 0; i < result.length; iPP) {
                        option.xAxis[0].data.push(result[i].date);
                    }
                    //option.series[0]data
                    option.series[0].data = [];
                    for (var i = 0; i < result.length; iPP) {
                        option.series[0].data.push(result[i].value);
                        if (result[i].value != null) {
                            countPP;
                        }
                    }
                    
                    myChart.hideLoading(); //
                    myChart.setOption(option);
                }
            },
            error : function(errorMsg) {
                alert("!");
            }
        })
    }
    setInterval(function () {
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex:0 ,//series
          dataIndex:count-1,//tooltip
        });
    },3000);
    setInterval(function () {
        series: [
            {
                markPoint: {
                    symbol: "path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z",
                    data:[{name : "S", value : "ECB\n2018-10-25\t20:30\n:"+ countTime(),  coord: [800, 3]}],

                },
            },
        ]        
    },1000);
    
    //echarts
       myChart.on("click", function (param){
           var currenttimevalue=param.name;
           window.location.href="currenttime.html?currenttimevalue="+currenttimevalue;
           
       });
       

</script>

< / body >

< / html >

Sep.07,2021
Menu