echart 和ajax实现动态刷新

最新推荐文章于 2024-07-26 11:09:07 发布

loveyourz1

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量598

点赞数 2

文章标签： ajax echarts javascript

本文链接：https://blog.csdn.net/loveyourz1/article/details/120698101

版权

将整个设置echart部分代码设置为一个函数

function create(){
    var  myChart = echarts.init(document.getElementById('main'));
    var arr1=[],arr2=[];
    function arrTest(){
        $.ajax({

            type:"post",
            url:"finally.php",
            dataType:"json",
            async:false,
            data:{},
            success:function(result){

                if (result){
                    for (var i = 0; i < result.length; i++) {
                        arr1.push(result[i].id);
                        arr2.push(result[i].num);
                    }
                }
            },
            error:function(errorMsg) {
                alert("数据读取失败");
            }
        })
        return arr1,arr2;
    }

    // setInterval(arrTest(),300);
    //  while(1){
    arrTest();
    // setInterval(arrTest(),300);
    console.log(arr1[0]);
    // window.function(){
    //     setInterval(arrTest(),300);
    // }
    var  option = {
        tooltip: {
            show: true
        },
        legend: {
            data:['num']
        },
        xAxis : [
            {
                type : 'category',
                data : arr1
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"num",
                "type":"bar",
                "data":arr2
            }
        ]
    };
    myChart.setOption(option);
    // }

    // setInterval(arrTest(),300);
    // sjetInterval(myChart.setOption(option),3000);

}

再通过setInterval重复调用这个函数

$(function (){
    setInterval("create()",1000);
})

整体代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../echart test/js/echarts.min.js"></script>
<script src="../echart test/js/jquery-3.6.0.min.js"></script>
</head>

<body>
<div id="main" style="height:400px"></div>
<script type="text/javascript">

    function create(){
        var  myChart = echarts.init(document.getElementById('main'));
        var arr1=[],arr2=[];
        function arrTest(){
            $.ajax({

                type:"post",
                url:"finally.php",
                dataType:"json",
                async:false,
                data:{},
                success:function(result){

                    if (result){
                        for (var i = 0; i < result.length; i++) {
                            arr1.push(result[i].id);
                            arr2.push(result[i].num);
                        }
                    }
                },
                error:function(errorMsg) {
                    alert("数据读取失败");
                }
            })
            return arr1,arr2;
        }

        // setInterval(arrTest(),300);
        //  while(1){
        arrTest();
        // setInterval(arrTest(),300);
        console.log(arr1[0]);
        // window.function(){
        //     setInterval(arrTest(),300);
        // }
        var  option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['num']
            },
            xAxis : [
                {
                    type : 'category',
                    data : arr1
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"num",
                    "type":"bar",
                    "data":arr2
                }
            ]
        };
        myChart.setOption(option);
        // }

        // setInterval(arrTest(),300);
        // sjetInterval(myChart.setOption(option),3000);

    }


    $(function (){
        setInterval("create()",1000);
    })

    </script>
</body>
</html>

loveyourz1

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
echart 和ajax实现动态刷新

将整个设置echart部分代码设置为一个函数function create(){ var myChart = echarts.init(document.getElementById('main')); var arr1=[],arr2=[]; function arrTest(){ $.ajax({ type:"post", url:"finally.php", dataType:"j
复制链接

扫一扫