echarts 使用 ajax 加载数据，无法清除上一次数据

Question

我明明是已经在加载第二次数据时使用 clear() 方法

function cycle1() {
            setInterval(function() {
                chart1.clear();
                chart1.setOption(option1, true);
                getOption1();
            }, 5000);
        }

但是加载出来的数据还是第一次加载的数据，请大神们指教，谢谢了。
下面是getOption1方法，就是重复调用接口的。

var sumdata = [], completedata = [];

function getOption1() {
        $.ajax({
        type : "POST",
        url : urls,
        dataType : 'json',
        success : function(data) {
            for(var i = 0; i < data.fakedata1.length; i++) {
                completedata.push(data.fakedata1[i]);
                sumdata.push(data.fakedata2[i]);
            }
            console.log("completedata:",completedata);
            console.log("sumdata:",sumdata);
            sumdata = [];
            completedata = [];
        }
    })
}

option1 = {

backgroundColor: '#0b1d35',
title: {
    text: "前五名",
    textStyle: {
        color:'white',
        fontStyle:'normal',
        fontWeight:'bold',
        fontFamily:'sans-serif',
　　　　 fontSize:18,
    },
    left:20,
    top:30
},
legend: {
    top: 0,
    right: 0,
    textStyle:{
        color:'#fff',
        fontSize: 16
    },
    data: ['完成量', '订单总量']
},
grid: {
    top: '30%',
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
},

tooltip: {
    show:"true",
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
},
xAxis:  {
    type: 'value',
    axisTick : {show: false},
    axisLine: {
        show: false,
        lineStyle:{
            color:'#fff',
        }
    },
    splitLine: {
        show: false
    },
},
yAxis: [
        {
            type: 'category',
            axisTick : {show: false},
            axisLine: {
                show: true,
                lineStyle:{
                    color:'#fff',
                }
            },
            axisLabel: {
                textStyle: {
                    fontSize: 16
                }
            },
            data: ['康威广场','越时代','盘龙一号','国际中心','翡翠东湾']
        },
        {
            type: 'category',
            axisLine: {show:false},
            axisTick: {show:false},
            axisLabel: {show:false},
            splitArea: {show:false},
            splitLine: {show:false},
            data: ['康威广场','越时代','盘龙一号','国际中心','翡翠东湾']
        },
        
],
series: [
    {
        name: '订单总量',
        type: 'bar',
        yAxisIndex:1,
        
        itemStyle:{
            normal: {
                show: true,
                color: '#277ace',
                barBorderRadius:50,
                borderWidth:0,
                borderColor:'#333',
            }
        },
        barGap:'0%',
        barCategoryGap:'50%',
        // data: [120, 132, 101, 134, 90]
        data: sumdata
    },
    {
        name: '完成量',
        type: 'bar',
        itemStyle:{
            normal: {
                show: true,
                color: '#5de3e1',
                barBorderRadius:50,
                borderWidth:0,
                borderColor:'#333',
            }
        },
        barGap:'0%',
        barCategoryGap:'50%',
        // data: [32, 52, 41, 64, 15]
        data: completedata
    }
   
]

};

Answer 1

先谢谢上面两位 @sosout @Yhspehy ，特别是 @Yhspehy
首先 var sumdata = [], completedata = [];这两个全局变量是需要的。
循环请求的接口数据也没有问题。

for(var i = 0; i < data.fakedata1.length; i++) {
                completedata.push(data.fakedata1[i]);
                sumdata.push(data.fakedata2[i]);
            }

问题实际上是出在 option1 的 series 中的 data 所获取的数据并没有真正随着 completedata 和 sumdata 的改变而改变，必须要用下面方法来改变。

option1.series[0].data = sumdata;
option1.series[1].data = completedata;

然后 series 中的data 要这样子

data:[]

好了，到这里就没有问题了，我把全部代码发出来吧。
请看下面
HTML

<div class="box1">
        <div style="width: 400px; margin: 10px 0 0 30px; color: white; font-size: 36px;">
            订单完成率排名
        </div>
        <hr style="width: 400px; height: 3px; margin-left: 30px;" color="purple">
        <div id="chart1" style="width: 580px; height: 220px;"></div>
</div>

然后写了个js调用

<script type="text/javascript">
        var chart1 = echarts.init(document.getElementById('chart1'));
        function cycle1() {
            setInterval(function() {
                // chart1.clear();
                getOption1();
            }, 5000);
        }
        cycle1();
</script>

另外引用的是外部的js，实际上我应该都放外面的，但是现在怎么方便怎么来吧，我以后再优化

var sumdata = [], completedata = [];

function getOption1() {
    $.ajax({
        type : "POST",
        url : urls,
        dataType : 'json',
        // async: false,
        success : function(data) {
            for(var i = 0; i < data.fakedata1.length; i++) {
                completedata.push(data.fakedata1[i]);
                sumdata.push(data.fakedata2[i]);
            }
            option1.series[0].data = sumdata;
            option1.series[1].data = completedata;
            console.log("completedata:",completedata);
            console.log("sumdata:",sumdata);
            chart1.setOption(option1, true);
            completedata = [];//这里就是把数组请空,重新放新请求的数据
            sumdata = [];//这里就是把数组请空,重新放新请求的数据
        }
    })
}

option1 = {
    backgroundColor: '#0b1d35',
    title: {
        text: "前五名",
        textStyle: {
            color:'white',
            fontStyle:'normal',
            fontWeight:'bold',
            fontFamily:'sans-serif',
    　　　　 fontSize:18,
        },
        left:20,
        top:30
    },
    legend: {
        top: 0,
        right: 0,
        textStyle:{
            color:'#fff',
            fontSize: 16
        },
        data: ['完成量', '订单总量']
    },
    grid: {
        top: '30%',
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },
    
    tooltip: {
        show:"true",
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    xAxis:  {
        type: 'value',
        axisTick : {show: false},
        axisLine: {
            show: false,
            lineStyle:{
                color:'#fff',
            }
        },
        splitLine: {
            show: false
        },
    },
    yAxis: [
            {
                type: 'category',
                axisTick : {show: false},
                axisLine: {
                    show: true,
                    lineStyle:{
                        color:'#fff',
                    }
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 16
                    }
                },
                data: ['康威广场','越时代','重庆盘龙一号','国际中心','翡翠东湾']
            },
            {
                type: 'category',
                axisLine: {show:false},
                axisTick: {show:false},
                axisLabel: {show:false},
                splitArea: {show:false},
                splitLine: {show:false},
                data: ['康威广场','越时代','盘龙一号','国际中心','翡翠东湾']
            },
            
    ],
    series: [
        {
            name: '订单总量',
            type: 'bar',
            yAxisIndex:1,
            
            itemStyle:{
                normal: {
                    show: true,
                    color: '#277ace',
                    barBorderRadius:50,
                    borderWidth:0,
                    borderColor:'#333',
                }
            },
            barGap:'0%',
            barCategoryGap:'50%',
            // data: [120, 132, 101, 134, 90]
            data: []
        },
        {
            name: '完成量',
            type: 'bar',
            itemStyle:{
                normal: {
                    show: true,
                    color: '#5de3e1',
                    barBorderRadius:50,
                    borderWidth:0,
                    borderColor:'#333',
                }
            },
            barGap:'0%',
            barCategoryGap:'50%',
            // data: [32, 52, 41, 64, 15]
            data: []
        }
    ]
};

好了，这样就完成了。

Answer 2

直接setOption通过数据的变化就能实现你要的效果。setOption时图表不再是消失再出现，而是在原基础上发生图形变化。以下是详细文档：

Answer 3

不需要clean，数据改变自动刷新，你不刷新的问题可能是option里的data没有刷新，你可以在console.log("sumdata:",sumdata)之后打印下option，而且你为什么赋值之后又设置sumdata 和completedata 为[]