flask中定時刷新數據 setInterval+ajax

參考鏈接：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放在一個方法中，然后定時刷新這個方法即可。