秒客网

参考链接：https://www.zh30.com/setinterval-application-examples-ajax.html

就上篇博客的代码而言。添加了实时刷新数据，实现没过3s表格变换一次。

<script type="text/javascript">
                            // 基于准备好的dom，初始化echarts实例
                            var myChart1 = echarts.init(document.getElementById(\'main1\'));
                            // 指定图表的配置项和数据
                            myChart1.setOption({
                                title: {
                                    text: \'可视化展示\'
                                },
                                tooltip: {},
                                legend: {
                                    data: [\'目标检测\']
                                },
                                xAxis: {
                                    data: []
                                },
                                yAxis: {},
                                series: [{
                                    name: \'person\',
                                    type: \'bar\',
                                    data: []
                                }]
                            });
                            // 异步加载数据
                            function get() {  //添加一个方法
                                myChart1.showLoading(); // 显示加载动画
                                xvalue=[],
                                yvalue=[]
                                $.ajax({
                                    type: "GET",
                                    url: "/getdata",
                                    dataType: "json",
                                    success: function (result) {
                                        for (var i = 0; i < result.length; i++) {
                                            xvalue.push(result[i].name)
                                            yvalue.push(result[i].num)
                                        }
                                        myChart1.hideLoading();
                                        myChart1.setOption({
                                            xAxis: {
                                                data: xvalue,
                                                "axisLabel":{
                                                    interval: 0
                                                }
                                            },
                                            yAxis: {},
                                            series: [{
                                                name: \'目标检测\',
                                                type: \'bar\',
                                                data: yvalue
                                            }]
                                        });
                                    }
                                });
                            }
                            setInterval(function(){ //定时刷新这个方法
                                get()
                            },3000)
                            </script>

只需要将ajax放在一个方法中，然后定时刷新这个方法即可。