series数据更新问题

[Thinkpad93]

One-line summary [问题简述]

series里的数据要从后台获取，在ajax请求成功后，怎么实现更新图表数据
我直接上个演示地址吧，方便查看问题所在，代码也是写在页面中的
我在页面上加了一个定时器，每隔一段时间去请求数据，然后更新图表，但是发现我请求成功后
想重新 Tcharts.setOption(option);的时候，还是存在着上一次的数据
另外描述的不对的地址，请多多指教！

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 3.6.2
• Browser version [浏览器类型和版本]: Chrome 52.0.2743.116
• OS Version [操作系统类型和版本]:

Expected behaviour [期望结果]

ECharts option [ECharts配置项]

    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;
            }
        });
    }


    function fechDate(){
        $.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){
            fechDate();
        }else{
            dataPage = 1;
            fechDate();
        }
    },10000);

Other comments [其他信息]

在线演示地址是 演示地址

[pissang]

setOption(option, true)？

[zhouchunyi]

#3976 的回答中有一个回答解决了我的问题
先chartInstance.clear()再setOption，直接setOption(option,true)还不是很能解决update的问题。我自己试的结果是上面两种方法都没有了merge的效果。echarts更新的过程好像确实是有问题的。我想响应式的修改graph的展示，每次chartInstance.resize都会留下边的印记。我也很想知道有没有靠谱的解决方案

[hewenguang]

setOption(option, true)？

这个全量更新，我通过 dispatchAction 做的变更就没了。你们又不推荐 getOption 会合并在更新，请问还有更好的方案吗？