Echarts实现动态折线图的定时刷新-Toy模板网

这篇具有很好参考价值的文章主要介绍了Echarts实现动态折线图的定时刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

echarts动态折线图,前端,echarts,前端,javascript,java,后端,Powered by 金山文档

首先来看一下没有和后台交互的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方式返回即可。文章来源地址https://www.toymoban.com/news/detail-532557.html

到了这里，关于Echarts实现动态折线图的定时刷新的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！