javascript - 百度echarts series資料更新問題

Question

我直接上個演示地址吧，方便查看問題所在，代碼也是寫在頁面中的
默認先請求一次，然後定時器，每隔一段時間去請求數據，更新圖表，但是發現我請求成功後，
想重新Tcharts.setOption(option)的時候，還是存在著上一次的數據，例如我第一次請求是2條數據，然後渲染沒有問題，第二次請求返回1條數據的時候，渲染有問題,圖表還存在著上一次的資料

我截了下ajax請求的圖片

    var maxpage = 1;
    var dataPage = 1;
    var option = {};
    var dataArray ,xAxisArray,legendArray;
    var Tcharts = echarts.init(document.getElementById('Tcharts'));
    Tcharts.setOption({
        title: {
            //是否显示标题组件
            show : false
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:[],
            left : 'auto',
            right : '0',
            top : '0',
            bottom : 'auto',
            padding : 5,
            itemWidth : 10,
            itemGap : 20
        },
        grid: {
            show : true,
            left: '0',
            right: '3%',
            bottom: '0',
            top: '15%',
            containLabel: true,
            borderColor : '#ffffff'
        },
        toolbox: {
            show : false,
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            show : true,
            type: 'category',
            data: [],
            nameGap : 10,
            boundaryGap : false,
            nameTextStyle : {
                color : '#f2f2f2'
            },
            axisLabel : {

            },
            axisLine : {
                show : false,
                onZero : true,
                lineStyle : {
                    color : '#999999',
                    fontWeight : 'bold'
                }
            },
            splitLine : {
                show : false
            },
            axisTick : {
                lineStyle : {
                    color : '#ff5a2a',
                    width : 1
                },
                show : false //是否显示坐标轴刻度
            }
        },
        yAxis: {
            type: 'value',
            axisLine : {
                show : true,
                onZero : true,
                lineStyle : {
                    color : '#999999',
                    fontWeight : 'bold'
                }
            },
            axisLabel : {
            },
            axisTick : {
                show : false //是否显示坐标轴刻度
            }
        },
        series: [],
        textStyle : {
            fontFamily : 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif'
        },
        color : ['#ff5a2a','#a981f3','#1496ec','#55ea84'] //线条颜色列表
    });
    Tcharts.showLoading({
        text: "图表数据正在努力加载..."
    });
    //withDate
    function withDate(data){
        dataArray = [];
        xAxisArray = [];
        legendArray = [];
        var goods = data.goods,months = data.months;
        if (data.msg === 1) {
            for (var g = 0;g < goods.length;g++) {
                dataArray.push(goods[g]);
                legendArray.push({icon : 'circle',name : goods[g].name});
            }
            for (var m = 0;m < months.length;m++) {
                xAxisArray.push(months[m]);
            }
            option = {
                legend: {
                    data : legendArray
                },
                xAxis : {
                    data : xAxisArray
                },
                series : dataArray
            }
            //console.log(dataArray +":" + xAxisArray + ":" + legendArray);
            Tcharts.setOption(option);
        }else {

        }
    }

    //ajax
    function getDate(){
        $.ajax({
            type: "post",
            url: "http://wy.woawin.com/verify/pricemovements",
            data : {dataPage : dataPage},
            dataType : "json",
            async : true,
            success : function(data){
                Tcharts.hideLoading();
                withDate(data);
                dataPage ++;
                maxpage = data.maxpage;
            }
        });
    }

    getDate();

    window.setInterval(function(){
        if( maxpage >= dataPage){
            getDate();
        }else{
            dataPage = 1;
            getDate();
        }
    },10000);

線上示範地下 演示效果

Answer 1

echarts的setOption說瞭如果新數據沒有覆蓋掉原來的數據，那麼原來數據會繼續重複使用。

你的series.data之前是一個[{},{}]這樣的形式，重新setOption的時候應該是這樣的[{}]，另外一個物件就繼續重用了。

題主可以試試每次都傳兩個進去，如果沒有資料就傳一個空物件。

個人推測，有什麼不對還望指正

let dataArr = [];
promise.then(result) {
    dataArr.fill({});
    result.data.forEach((item, index) => dataArr[index] = item);
    // 使用dataArr 进行渲染
}