Echarts实现动态折线图的定时刷新

在做项目的过程中，遇到一个需求：要从后台读取数据，并对echarts进行实时更新。先来看下实现的效果图：

首先来看一下没有和后台交互的echarts动态折线图如何实现，代码如下：

前面实现的是动态折现图并没有和后台交互，接下来看一下和后台交互的代码是如何实现的：

(1)首先是前端页面的修改

setInterval(function(){
        $.ajax({
            url:"后台的URL",
            data:{},
            async: true,
            dataType:"json",
         
            // 回调函数
            success:function (result) {
                showTime.shift();
                showValue.shift();
                showTime.push(getTime());
                showValue.push(result[0]);
                drawSituation();   
            },error:function(){
                 console.log("error");
            }
        });
        
    }, 1000);
    
    function drawSituation(){
        showChart.setOption({
            xAxis: {
                data: showTime,
              },
              series: [
                {
                  data: showValue,
                }
              ]
        });

(2)后台代码的实现

    @PrivilegeANTT(desc="测试")
    public void test() throws Exception {
        List list = new ArrayList<>();
        list.add(Math.random());
        this.renderJSON(list);
    }

后台只需要将数据以JSON方式返回即可。