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

姚舜禹_12140

已于 2023-01-08 19:05:26 修改

阅读量8.1k

点赞数 7

分类专栏：前端文章标签： echarts 前端 javascript java 后端 Powered by 金山文档

于 2023-01-08 19:00:21 首次发布

本文链接：https://blog.csdn.net/weixin_47382783/article/details/128603551

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章展示了如何在前端使用Echarts创建动态折线图，并通过AJAX与后台交互，每秒获取新数据，更新图表。首先，给出了一个静态的Echarts动态折线图实例，然后介绍如何修改代码，引入后台接口，用JSON数据替换随机生成的数据，实现图表的实时更新。

摘要由CSDN通过智能技术生成

在做项目的过程中，遇到一个需求：要从后台读取数据，并对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方式返回即可。