显示动态数据的图表动画出现问题

时间:2019-03-29 06:29:05

标签: javascript echarts

我使用echarts.js(https://echarts.baidu.com/dist/echarts.min.js)折线图动画时遇到问题 我能够在5秒的间隔后将数据加载到序列中。但会刷新整个图表,从而破坏动画效果。 有什么方法可以在不影响整个图表动画的情况下帮助我从系列中加载/删除部分数据吗?

我尝试了多种方法,包括:

     mychart.getOption();
     mychart.setSeries();

但是这些都刷新了整个图表。但是我只想添加新数据,而对整个图表没有任何闪烁影响。

    setInterval(function () {
        hitslines.lines=[];
        $.ajax({
            url: "https://whos.amung.us/stats/data/?jte1b90n&k=dzsg93pq&pins=new",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            data: 'json',
            success: function (response) {
                for (var i = 0; i < response.pins.length; i++) {
                    hitslines.lines.push([
                        [
                            parseFloat(response.pins[i].lon),
                            parseFloat(response.pins[i].lat),
                        ],

                        [
                            parseFloat(officesLocations.offices[0].value[0]),
                            parseFloat(officesLocations.offices[0].value[1]),
                        ]
                    ]);


                }
            },
            async: false
        });
        if (count == 0){
            count += 1
            myChart.setOption({
                series: [{
                    name:'line',
                    data:  hitslines.lines
                }]
            });
        }
        myChart.setOption({
            series: [
            {
                name:'series2',
                data:  hitslines.lines
            }]
        });   
    }, 5000);

我想每隔5秒显示一次基于响应的纬度和经度的所有新访客,并从图表中删除当前不活跃的那些访客中的线条。简而言之,如果新的响应没有上一个响应的访问者经度,则从图表中删除这些线。 我的图表每5秒闪烁一次。我只是不想那样。

0 个答案:

没有答案