在做项目的过程中，遇到一个需求：要从后台读取数据，并对echarts进行实时更新。先来看下实现的效果图：
首先来看一下没有和后台交互的echarts动态折线图如何实现，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" /> <script src="js/jquery-3.5.1.js"></script> <script src="js/echarts.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <style> body{ background-color: #02102c; } </style> </head> <body> <div> <div class="row" style="margin:20px 20px"> <div class="col-md-5 col-md-offset-3" style="box-shadow: 2px 2px 5px #bbb;padding:10px 10px;border-radius:5px"> <div style="height:500px;" id="area" class="card-box"></div> </div> </div> </div> </div> </body> <script> $(function(){ var showTime = []; var showValue = []; var showArea = document.getElementById("area"); var showChart = echarts.init(showArea); //先默认添加10个元素 for(var i=0; i < 10; i++){ showTime.push(getTime()); showValue.push(Math.random()); } var showOption = { xAxis: { type: 'category', data: showTime, axixLine:{ show:true, lineStyle:{ color:"#FFFFFF" } }, axisLabel:{ show:true, textStyle:{ color:"#FFFFFF", fontSize:16 } }, }, yAxis: { type: 'value', axixLine:{ show:true, lineStyle:{ color:"#FFFFFF", wdith:5, type:"solid" } }, axisLabel:{ show:true, textStyle:{ color:"#FFFFFF", fontSize:16 } }, }, series: [ { data: showValue, type: 'line', symbolSize: 10, lineStyle: { color: '#FFFFFF', width: 4 } } ] }; showChart.setOption(showOption); //获取时间 function getTime(){ let time = new Date(); return time.toLocaleString(); } //定时更新 setInterval(function(){ //当长度大于10时，去除数组首元素 if(showTime.length > 10){ showTime.shift();showValue.shift(); } //将新值添加到数组中 showTime.push(getTime()); showValue.push(Math.random()); //重新绘制 showChart.setOption({ xAxis: { type: 'category', data: showTime, axixLine:{ show:true, lineStyle:{ color:"#FFFFFF" } }, axisLabel:{ show:true, textStyle:{ color:"#FFFFFF", fontSize:16 } }, }, yAxis: { type: 'value', axixLine:{ show:true, lineStyle:{ color:"#FFFFFF", wdith:5, type:"solid" } }, axisLabel:{ show:true, textStyle:{ color:"#FFFFFF", fontSize:16 } }, }, series: [ { data: showValue, type: 'line', symbolSize: 10, lineStyle: { color: '#FFFFFF', width: 4 } } ] }); }, 2000); }); </script> </html>
前面实现的是动态折现图并没有和后台交互，接下来看一下和后台交互的代码是如何实现的：
(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<Double> list = new ArrayList<>(); list.add(Math.random()); this.renderJSON(list); }
后台只需要将数据以JSON方式返回即可。
